doc: make front page video respond to layout changes (1/2)

The videos on the front page are always the same width, regardless of
the viewport width. These changes let the video fill the space given
to its container regardless of layout. It uses the standard hack for
making iframes responsive, but the videos are loaded at random and do
not have uniform aspect ratios so that information is injected into the
DOM using custom properties. If these are not supported, it falls back
to the same layout present before this change.

Note: this change also requires CL 108678 to complete the fix,
though either CL without the other is harmless.

Updates #24997.

Change-Id: I2f93dc21ffe01d99ce0e175e9dd0e3d486fddc9f
Reviewed-on: https://go-review.googlesource.com/108677
Run-TryBot: Andrew Bonventre <[email protected]>
TryBot-Result: Gobot Gobot <[email protected]>
Reviewed-by: Andrew Bonventre <[email protected]>

doc/root.html

@@ -74,7 +74,7 @@
 <div class="left">
   <div id="video">
     <div class="rootHeading">Featured video</div>
-    <iframe width="415" height="241" src="//www.youtube.com/embed/ytEkHepK08c" frameborder="0" allowfullscreen></iframe>
+	<div class="js-frontpage-video" style="--aspect-ratio-padding: 58.07%;"><iframe width="415" height="241" src="//www.youtube.com/embed/ytEkHepK08c" frameborder="0" allowfullscreen></iframe></div>
   </div>
 </div>
 
@@ -153,6 +153,10 @@
 		];
 		var v = videos[Math.floor(Math.random()*videos.length)];
 		$('#video iframe').attr('height', v.h).attr('src', v.s);
+		// Compute the aspect ratio (as a percentage) of the video
+		// using the fixed width 415 and the height of the current video, v.h.
+		var ar = 100*v.h/415;
+		$('.js-frontpage-video').attr('style', '--aspect-ratio-padding: ' + ar + '%;');
 	});
 
 	{{end}}