qbit/go
1
0
Fork 0
mirror of https://github.com/golang/go synced 2024-11-23 06:30:06 -07:00
Code Releases Activity

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

Browse Source 
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>
This commit is contained in:
jimmyfrasche 2018-04-22 15:58:49 -07:00 committed by Andrew Bonventre
parent f32348669c
commit d96221f206
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
doc/root.html
View File

@ -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}}