vs0068169

YouTube Video Background

Blog Post created by vs0068169 on Apr 2, 2018

For those that want to add a bit more jazz to some special courses you can add a dynamic background by embedding a video behind the page. The screen grabs above based on code I found on the web ages ago here: FullScreen YouTube Video Background In Pure CSS  and then modified here: https://moodle.org/mod/forum/discuss.php?d=324771#p1383234 

 

..and then turned it into a plugin here: Moodle plugins directory: Youtube_Page_background

 

We don't have access to that plugin suite but we can do it manually. If you paste the code into a label and then save it you can have a dynamic and ever-changing background (with audio).

 

It works best in "Clean" or "More" as you can scroll down and go full video (See pic RHS above). It work fine in "Boost" but you can't scroll.

 

I've used it for online chill-out rooms (waterfall) , self promotion (a Moodlemoot presentation), and to annoy my coworkers/students. Hope this is useful to someone.

 

 

<div class="video-background">

    <div class="video-foreground">

      <iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>

    </div>

  </div>

 

<div id="vidtop-content">

<div class="vid-info">

  <h1>YouTube Fullscreen Background Demo</h1>

  <p>The International Space Station orbits the Earth every 92 minutes, with its crew seeing a sunrise 15 times a day. It exists as a scientific, educational, and engineering platform in low orbit, 330 to 435 kilometres above the Earth.

     <p>Original timelapse by Riccardo Rossi (ISAA), used under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Raw photos courtesy of http://eol.jsc.nasa.gov/

<a href="FullScreen YouTube Video Background In Pure CSS ">Full Example</a>

  </div>

</div>

 

<style>

#CSS

* { box-sizing: border-box; }

.video-background {

  background: #000;

  position: fixed;

  top: 0; right: 0; bottom: 0; left: 0;

  z-index: -99;

}

 

.video-foreground,

.video-background iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

}

#vidtop-content {

 

color: #fff;

     z-index: 2;

  

}

.vid-info {

    padding: 1rem;

    font-family: Avenir, Helvetica, sans-serif;

   }

.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }

.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }

 

@media (min-aspect-ratio: 16/9) {

  .video-foreground { height: 300%; top: -100%; }

}

@media (max-aspect-ratio: 16/9) {

  .video-foreground { width: 300%; left: -100%; }

}

@media all and (max-width: 600px) {

.vid-info { width: 50%; padding: .5rem; }

.vid-info h1 { margin-bottom: .2rem; }

}

@media all and (max-width: 500px) {

.vid-info .acronym { display: none; }

}

 

#Taken From: https://codepen.io/dudleystorey/pen/PZyMrd

</style>

Outcomes