[t1120] Youtube width is calculated based on offset width and 16:9 aspect ratio, instead of a style.width and style.height

This commit is contained in:
Kate Hudson 2012-06-01 16:06:31 -04:00
Родитель 7f16423838
Коммит 70d12c86b0
2 изменённых файлов: 16 добавлений и 3 удалений

Просмотреть файл

@ -25,6 +25,8 @@
popcorn;
popcorn = Popcorn.youtube( '#video', 'http://www.youtube.com/watch?v=nfGV32RNkhw&autoplay=0' );
popcorn2 = Popcorn.youtube( '#video2', 'http://www.youtube.com/watch?v=M2Nn5hY5QzE' );
popcorn3 = Popcorn.youtube( '#video3', 'http://www.youtube.com/watch?v=nfGV32RNkhw&autoplay=0' );
popcorn = popcorn
.footnote({
@ -134,6 +136,10 @@
}, false);
}, false );
</script>
<style>
#video2 { width: 1100px; border: 1px solid red; }
#video3 { width: 100px; border: 1px solid blue; }
</style>
</head>
<body>
<div>
@ -198,5 +204,9 @@
<strong>Web Page Area</strong><br />
</div>
</div>
<p>This video should be 1100px wide and resize to fit the entire container:</p>
<div id="video2"></div><br />
<p>This video should be 640px wide, expanding out of its container:</p>
<div id="video3"></div><br />
</body>
</html>

Просмотреть файл

@ -168,7 +168,7 @@ Popcorn.player( "youtube", {
var youtubeInit = function() {
var src, height, width, query;
var src, width, relativeHeight, height, query;
var timeUpdate = function() {
@ -221,8 +221,11 @@ Popcorn.player( "youtube", {
// setting youtube player's height and width, min 640 x 390,
// anything smaller, and the player reports incorrect states.
height = media.style.height && media.offsetHeight >= 390 ? "" + media.offsetHeight : "390";
width = media.style.width && media.offsetWidth >= 640 ? "" + media.offsetWidth : "640";
width = media.offsetWidth && media.offsetWidth >= 640 ? "" + media.offsetWidth : "640";
relativeHeight = parseFloat( width/16 * 9 );
if( media.offsetHeight && media.style.height >= 390 ) { height = media.offsetHeight; }
else if ( relativeHeight && relativeHeight >= 390 ) { height = relativeHeight; }
else { height = 390; }
options.youtubeObject = new YT.Player( container.id, {
height: height,