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 <andybons@golang.org>
TryBot-Result: Gobot Gobot <gobot@golang.org>
Reviewed-by: Andrew Bonventre <andybons@golang.org>

diff --git a/doc/root.html b/doc/root.html
index a5119a9ff822edcc59419d51a3cf5c22f2fcb69b..545b28d2d5c6aac0fe5a2d1f391bf81e87cfb080 100644 (file)
--- a/doc/root.html
+++ b/doc/root.html
@@ -74,7 +74,7 @@ Linux, Mac OS X, Windows, and more.
 <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 @@ Linux, Mac OS X, Windows, and more.
                ];
                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}}