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:
parent
a8098c0fbc
commit
6f75e7d6e0
|
@ -74,6 +74,23 @@ body {
|
||||||
.container {
|
.container {
|
||||||
width: 1400px; }
|
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) {
|
@media screen and (max-width: 1680px) {
|
||||||
.container.\31 25\25 {
|
.container.\31 25\25 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -273,6 +290,13 @@ body {
|
||||||
.row.uniform.\32 5\25 {
|
.row.uniform.\32 5\25 {
|
||||||
margin: -12.5px 0 -1px -12.5px; }
|
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 {
|
.\31 2u, .\31 2u\24 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
clear: none;
|
clear: none;
|
||||||
|
|
|
@ -114,7 +114,45 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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">
|
<section class="wrapper style1">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
@ -129,6 +167,20 @@
|
||||||
<source src="media/simulation.mp4" type="video/mp4">
|
<source src="media/simulation.mp4" type="video/mp4">
|
||||||
<track src="media/simulation.vtt" label="English" kind="subtitles" srclang="en">
|
<track src="media/simulation.vtt" label="English" kind="subtitles" srclang="en">
|
||||||
</video>
|
</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>
|
<p>
|
||||||
See how Zuul tests cross-project changes in parallel.
|
See how Zuul tests cross-project changes in parallel.
|
||||||
</p>
|
</p>
|
||||||
|
|
Loading…
Reference in New Issue