Results 1 to 6 of 6

Thread: YouTube embedded video iframe problem

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Location
    Bangladesh
    Posts
    9
    Vote Rating
    0
      0  

    Default YouTube embedded video iframe problem

    I'm trying to show youtube video in sencha touch 2. The problem is the video chopping off on rotation changes or scrolling down to the bottom of the page.

    This is the initial view in landscape.

    fullplayer.jpg

    If i go portrait from landscape and then landscape while a part of player is visible/showing, scrolling down only shows half of the player.
    halfplayer.jpg

    halfplayer1.jpg

    Here is the code:

    Code:
    Ext.define('SmartSkins.view.Social',{
        extend:'Ext.Panel',
        xtype:'social',
        config:{
            layout: 'hbox',
            title:'Social Media & Helpful Viral Campaigns',
            scrollable:'vertical',
            items:[{
                flex:1,
                styleHtmlContent: true,
                html:'<div class="homeDiv"><h1>Social Media and Helpful Viral Campaigns</h1><p class="quote">"Be socially active and link to breaking news"<br>- Where were you when?</p><iframe width="90%" height="200" src="http://www.youtube.com/embed/2lzemboVKxA?feature=player_embedded" frameborder="0" allowfullscreen></iframe><p>Social Media<br>Strategies<br>Publishing and Messaging Strategies<br>Construct Blog and Social Media Platform Integration<br>Write and manage compelling blogs<br>Content strategy<br>Face to face communication strategies<br>Listening strategies<br>Helpful viral campaigns<br>Target demographics review and monitor your success<br>Compelling Storytelling<br>Create YouTube channels<br>Video content</p><p class="yplayer"><a class="letsTalk" href="#letstalk"></a></p></div>'
            }]
        }
    });

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    You have height set to 200 on your <iframe> don't you?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Location
    Bangladesh
    Posts
    9
    Vote Rating
    0
      0  

    Default

    Yes i've set height 200. I've tried fixed height, weidth also % , nothing worked.

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Location
    Monterrey N.L. Mxico
    Posts
    8
    Answers
    1
    Vote Rating
    0
      0  

    Default

    something similar is happening to me, the video just fit the full width of the screen but not the height, i used 100% for the width and auto for the height but is not working, did you solved your problem??

  5. #5
    Sencha User
    Join Date
    May 2011
    Location
    Melbourne, Australia
    Posts
    89
    Answers
    5
    Vote Rating
    7
      0  

    Default

    This link shows a method of applying a youtube video, with an improved method on the following.

    http://training.figleaf.com/tutorial...lesson10/5.cfm

    On mitchellsimoens personal blog is a response to this above technique, showing a very elegant method offering some great insights into advanced use of Sencha.


  6. #6
    Sencha User
    Join Date
    Apr 2014
    Posts
    5
    Vote Rating
    0
      0  

    Default

    Hope it will help some one
    In controls catch the orientation change event:

    Code:
    viewport: {   //capture the orientation change event
       orientationchange: 'onOrientationchange'
     }
    then set the viewport width and height:

    Code:
    onOrientationchange: function(viewport, orientation) {
               setTimeout(function() {
                    Ext.Viewport.setHeight(window.innerHeight); // -20 for the statusbar overlapping problem in ios 7
                    Ext.Viewport.setWidth(window.innerWidth);
            }, 250);
    }

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •