make shadowbox video always centered to fit the window height

Change-Id: I03f8ffac555dbbbbd5538fedf13413aca031fd74

tools/droiddoc/templates-sdk/assets/css/default.css

@@ -6950,25 +6950,26 @@ a.landing-button:visited {
   display:none;
   position:fixed;
   top:0;
-  left:-10px;
+  left:0;
-  width:102%;
+  width:100%;
   height:100%;
-  background-color:rgba(0,0,0,0.7);
+  background-color:rgba(0,0,0,0.8);
-  z-index:99;
+  z-index:9999;
 }
 
 #video-frame {
-  width:948px;
+  width:940px;
-  height:529px;
+  height:100%;
-  margin:32px auto 0;
+  margin:72px auto;
   display:none;
+  position:relative;
 }
 
 .video-close {
   cursor: pointer;
-  position: relative;
+  position: absolute;
-  left: 948px;
+  right: -49px;
-  top: -8px;
+  top: -49px;
   pointer-events: all;
 }
 

tools/droiddoc/templates-sdk/assets/js/docs.js

@@ -592,18 +592,46 @@ var youTubePlayer;
 function onYouTubeIframeAPIReady() {
 }
 
+/* Returns the height the shadowbox video should be. It's based on the current
+   height of the "video-frame" element, which is 100% height for the window.
+   Then minus the margin so the video isn't actually the full window height. */
+function getVideoHeight() {
+  var frameHeight = $("#video-frame").height();
+  var marginTop = $("#video-frame").css('margin-top').split('px')[0];
+  return frameHeight - (marginTop * 2);
+}
+
 function startYouTubePlayer(videoId) {
-  var idAndHash = videoId.split("#");
+  $("#video-container").show();
-  var startTime = 0;
+  $("#video-frame").show();
-  var lang = getLangPref();
+
-  var captionsOn = lang == 'en' ? 0 : 1;
+  // compute the size of the player so it's centered in window
-  if (idAndHash.length > 1) {
+  var maxWidth = 940;  // the width of the web site content
-    startTime = idAndHash[1].split("t=")[1] != undefined ? idAndHash[1].split("t=")[1] : 0;
+  var videoAspect = .5625; // based on 1280x720 resolution
+  var maxHeight = maxWidth * videoAspect;
+  var videoHeight = getVideoHeight();
+  var videoWidth = videoHeight / videoAspect;
+  if (videoWidth > maxWidth) {
+    videoWidth = maxWidth;
+    videoHeight = maxHeight;
   }
+  $("#video-frame").css('width', videoWidth);
+
+  // check if we've already created this player
   if (youTubePlayer == null) {
+    // check if there's a start time specified
+    var idAndHash = videoId.split("#");
+    var startTime = 0;
+    if (idAndHash.length > 1) {
+      startTime = idAndHash[1].split("t=")[1] != undefined ? idAndHash[1].split("t=")[1] : 0;
+    }
+    // enable localized player
+    var lang = getLangPref();
+    var captionsOn = lang == 'en' ? 0 : 1;
+
     youTubePlayer = new YT.Player('youTubePlayer', {
-      height: '529',
+      height: videoHeight,
-      width: '940',
+      width: videoWidth,
       videoId: idAndHash[0],
       playerVars: {start: startTime, hl: lang, cc_load_policy: captionsOn},
       events: {
@@ -612,9 +640,10 @@ function startYouTubePlayer(videoId) {
       }
     });
   } else {
+    // reset the size in case the user adjusted the window since last play
+    youTubePlayer.setSize(videoWidth, videoHeight);
     youTubePlayer.playVideo();
   }
-  $("#video-container").fadeIn(200, function(){$("#video-frame").show()});
 }
 
 function onPlayerReady(event) {
@@ -627,11 +656,10 @@ function onPlayerReady(event) {
 function closeVideo() {
   try {
     youTubePlayer.pauseVideo();
-    $("#video-container").fadeOut(200);
   } catch(e) {
     console.log('Video not available');
-    $("#video-container").fadeOut(200);
   }
+  $("#video-container").fadeOut(200);
 }
 
 /* Track youtube playback for analytics */