zuul
/
zuul-website
Code Issues Proposed changes

Embed the openinfra live video from youtube 

This uses the no-cookie version of the embed to prevent info from going
to youtube unless users watch the video. Also this is a hack job of css
I welcome help :)

If we'd prefer to only link to the Youtube video rather than embed that
should be simpler and I can respin for that.

Change-Id: Iaaaed8b0927269665a5e850cab43f84322c825ad
This commit is contained in:
Clark Boylan 2021-05-27 11:10:57 -07:00
parent a8098c0fbc
commit 6f75e7d6e0
2 changed files with 77 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
www/assets/css/main.css
View File

@ -74,6 +74,23 @@ body {
.container {
width: 1400px; }
/* Youtube embed size adjustment.
* Taken from https://stackoverflow.com/questions/35814653/automatic-height-when-embedding-a-youtube-video/54924505
*/
.yt-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.yt-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width: 1680px) {
.container.\31 25\25 {
width: 100%;
@ -273,6 +290,13 @@ body {
.row.uniform.\32 5\25 {
margin: -12.5px 0 -1px -12.5px; }
.row-vid-title > * {
padding: 15px 0 0 50px;
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.\31 2u, .\31 2u\24 {
width: 100%;
clear: none;

54
www/index.html
View File

@ -114,7 +114,45 @@
</div>
</section>
<!-- Video -->
<!-- OpenInfra Live Video -->
<section class="wrapper style1">
<div class="container">
<div class="row">
<section class="3u 12u(narrower)">
<div class="box highlight">
</div>
</section>
<section class="6u 12u(narrower)">
<div class="yt-container">
<iframe src="https://www.youtube-nocookie.com/embed/MptrjDKrKhI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
<section class="3u 12u(narrower)">
<div class="box highlight">
</div>
</section>
</div>
<div class="row-vid-title">
<section class="3u 12u(narrower)">
<div class="box highlight">
</div>
</section>
<section class="6u 12u(narrower)">
<div class="box highlight">
<p>
Watch the OpenInfra Live Zuul Update
</p>
</div>
</section>
<section class="3u 12u(narrower)">
<div class="box highlight">
</div>
</section>
</div>
</div>
</section>
<!-- Gating Video -->
<section class="wrapper style1">
<div class="container">
<div class="row">
@ -129,6 +167,20 @@
<source src="media/simulation.mp4" type="video/mp4">
<track src="media/simulation.vtt" label="English" kind="subtitles" srclang="en">
</video>
</div>
</section>
<section class="3u 12u(narrower)">
<div class="box highlight">
</div>
</section>
</div>
<div class="row-vid-title">
<section class="3u 12u(narrower)">
<div class="box highlight">
</div>
</section>
<section class="6u 12u(narrower)">
<div class="box highlight">
<p>
See how Zuul tests cross-project changes in parallel.
</p>