-
18 Jul 2012 5:55 AM #1Sencha User
- Join Date
- Jul 2012
- Posts
- 36
- Vote Rating
- 0
Youtube iFrame height bug when using sethtml
Youtube iFrame height bug when using sethtml
REQUIRED INFORMATIONExt version tested:
- Sencha Touch 2.0.1
- <!DOCTYPE html>
- There is a bug in the setHtml method when dealing with Youtube videos in an iframe. The same method works corectly in Chrome,and it also works when setting a height for the iframe in pixels. When setting a height to 100% it works in Chrome but in Safari when you inspect the DOM it shows a height of 0.
- Calling Youtube to display in a split view, with videos on the left hand side. When clicking an item it displays the video in the detail panel. It does this using the 'id' parameter for the video.
- Correct height of Youtube video
- Height of zero in Safari, but correct height in Chrome. Works if setting a fixed height in pixels like this:See attached pictures.
Not working:
This is working:Code:onListDisclose: function(list, record, target, index, e, options) { var src = record.get('id'); <iframe width="100%" height="100%" src="http://www.youtube.com/embed/'+src+'" frameborder="0" allowfullscreen></iframe>
Code:onListDisclose: function(list, record, target, index, e, options) { var src = record.get('id'); <iframe width="100%" height="500px" src="http://www.youtube.com/embed/'+src+'" frameborder="0" allowfullscreen></iframe>
Possible fix:- set a height of the video in pixels instead of %
- only default ext-all.css
- custom css (include details)
- ________
- WinXP Pro
-
18 Jul 2012 6:18 AM #2Sencha - Senior Forum Manager
- Join Date
- Mar 2007
- Location
- St. Louis, MO
- Posts
- 34,107
- Vote Rating
- 453
Layouts are CSS based and setHtml just inserts the html into the DOM and does zero height calculation so this is due to your CSS and browser.
Mitchell Simoens @SenchaMitch
Sencha Inc, Senior Forum Manager
________________
http://www.JSONPLint.com - Source to lint your JSONP!
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
https://github.com/mitchellsimoens
Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/
Need more help with your app? Hire Sencha Services services@sencha.com
Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is almost in print!
When posting code, please use BBCode's CODE tags.
-
18 Jul 2012 6:26 AM #3Sencha User
- Join Date
- Jul 2012
- Posts
- 36
- Vote Rating
- 0
Strange...
Strange...
Oh so perhaps a bug with Safari? The weird thing is it works when the splitview and setHtml is by itself in a container, and even when placed in a tabpanel (when setting the height to 100%). It stops working when I set the tabpanel inside a container and I have to set a fixed height......so it lead me to think it was Sencha Touch.
Is this still a Safari bug?
-
18 Jul 2012 6:33 AM #4Sencha - Senior Forum Manager
- Join Date
- Mar 2007
- Location
- St. Louis, MO
- Posts
- 34,107
- Vote Rating
- 453
I don't really think it's a safari bug, I think the styles on the parent are causing it to have a zero height.
Mitchell Simoens @SenchaMitch
Sencha Inc, Senior Forum Manager
________________
http://www.JSONPLint.com - Source to lint your JSONP!
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
https://github.com/mitchellsimoens
Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/
Need more help with your app? Hire Sencha Services services@sencha.com
Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is almost in print!
When posting code, please use BBCode's CODE tags.
Looks like we can't reproduce the issue or there's a problem in the test case provided.
Reply With Quote
