diff --git a/players/youtube/popcorn.youtube.html b/players/youtube/popcorn.youtube.html index 0fcc492c..3d1e0146 100644 --- a/players/youtube/popcorn.youtube.html +++ b/players/youtube/popcorn.youtube.html @@ -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 ); +
@@ -198,5 +204,9 @@ Web Page Area
+

This video should be 1100px wide and resize to fit the entire container:

+

+

This video should be 640px wide, expanding out of its container:

+

diff --git a/players/youtube/popcorn.youtube.js b/players/youtube/popcorn.youtube.js index d6c0961c..b07ab9c1 100755 --- a/players/youtube/popcorn.youtube.js +++ b/players/youtube/popcorn.youtube.js @@ -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,