Cacher is the code snippet organizer for pro developers

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