YouTube matrix background.
ie - https://www.woodlandswellness.com/test, http://cloud.madebyspeak.com/351ad3
<div class="video-container">
<div id="ytplayer"></div>
<video poster="{{ Module.FieldValues.MobilePoster }}" id="bgvid" playsinline autoplay muted loop>
<source src="{{ Module.FieldValues.MobileVideo }}" type="video/mp4">
</video>
</div>
<div class="play">
<span>
<a class="video-launch" rel="shadowbox;height=450;width=800" href="https://www.youtube.com/embed/{{ Module.FieldValues.Video }}">
<img class="video-play throb" style="height:75px" src="SiteFiles/2435/css/images/play-button.svg" alt="Play video" />
</a>
</span>
</div>
<script src="//www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('ytplayer', {
videoId: '{{ Module.FieldValues.Video }}', // YouTube Video ID
width: 560, // Player width (in px)
height: 316, // Player height (in px)
playerVars: {
autoplay: 1, // Auto-play the video on load
loop: 1, // Run the video in a loop
playlist: '{{ Module.FieldValues.Video }}', // loop will not work unless a playlist is defined
rel: 0,
enablejsapi: 1,
controls: 0, // Show pause/play buttons in player
showinfo: 0, // Hide the video title
modestbranding: 1, // Hide the Youtube Logo
fs: 0, // Hide the full screen button
cc_load_policy: 0, // Hide closed captions
iv_load_policy: 3, // Hide the Video Annotations
autohide: 1 // Hide video controls when playing
},
events: {
onReady: function(e) {
e.target.mute();
}
}
});
}
jQ171(document).ready(function() {
$('#ytplayer').hide().delay(2000).fadeIn('fast');
});
// Written by @labnol
</script>
<!--put this in matrix-->
<style>
.video-container {
background-image: url("{{ Module.FieldValues.MobilePoster }}");
}
</style>