Moodle.net

Boost presets

Moodle 3.2 ships with a new theme "Boost". Boost is an extremely flexible theme that allows direct customisation via uploading a "Preset" file (no plugin installation required). The preset file contains a list of SCSS instructions which is used to generate the new stylesheets for the theme. 

Preset files can be written from scratch or imported from a Bootswatch file.


Page: () 1 ... 8 9 10 11 12 13 14
Name: Youtube Background preset
Description:

This preset (should) work with any Boost theme and is adapted from  https://s.codepen.io/dudleystorey/debug/PZyMrd

It allows a YouTube video to be added to any page (including different videos on different pages).


To use:

You add this preset (or code contained within) into your Boost theme.

Then copy and paste the code below (modified to suit your video and text) into a block on the page


<div class="video-background">

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

</div>

<div id="vidtop-content">

<div class="vid-info">

<h3>YouTube Fullscreen Background Demo</h3>

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

<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="http://moodle.ucol.ac.nz/500/Use-YouTube-Videos-as-Fullscreen-Web-Page-Backgrounds">Full article</a></p>

</div>

</div>

Version: 1.00
Moodle versions: 3.2, 3.3
Preview: Sample YouTube Background
Preset file: text/x-scss youtubebackground.scss
Page: () 1 ... 8 9 10 11 12 13 14

Moodle™ is a registered trademark.
Privacy | Contact