Tiggles ツ
11/1/2017 - 6:55 PM

[Desktop + Mobile Video Hero W/ Matrix] Allows the use of the Sitewrench's Matrix Page Part to allow video to be played for mobile and deskt

[Desktop + Mobile Video Hero W/ Matrix] Allows the use of the Sitewrench's Matrix Page Part to allow video to be played for mobile and desktop. https://www.flaquarium.org -CF #sitewrench #javascript #html #liquid #css

style.less
content_copyfile_download
/* ====================== Video Components ====================== */

// desktop
.video-container {
  background-image: url('images/cover.jpg');
  background-position: center;
  background-size: cover;
  height: 100vh;
  -webkit-transition: all 0.75s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s;
  transition: all 0.75s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s;
  position: fixed;
  width: 100%;
  z-index: -1;

 iframe {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.77vh;
    -webkit-transition: all 1s ease;
  	transition: all 1s ease;

    &.loaded {
      opacity: 1;
    }
  }
}

// mobile
#bgvid {
	pointer-events: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100vw;
	min-height: 100vh;
}
bgvid.js
content_copyfile_download
//this will display vid depending on viewport size


$(document).ready(function() {
/* ==========================================================================
BKG Video
========================================================================== */ 

setTimeout(function(){
  $('.video-container iframe').addClass('loaded');
}, 3000);

// remove mobile video on desktop
if ( $(window).width() > 768 ) {
  $('#bgvid').remove();
}

// remove desktop video on mobile
if ( $(window).width() <= 768 ) {
  $('.video-container').remove();
}

}); // doc ready END
background-video.html
content_copyfile_download
<!-- This is hardcoded -->

<body>
<asp:ContentPlaceHolder ID="videoBackground" runat="server" visible="true"></asp:ContentPlaceHolder>
</body>




<!-- This is in Matrix -->


<!-- Vimeo : for desktop -->
<div class="video-container">
	<iframe id="vimeo" allowfullscreen="" frameborder="0" height="100%" mozallowfullscreen="" src="{{Module.FieldValues.DesktopVideo}}?background=1" webkitallowfullscreen="" width="100%"></iframe>
</div>

<!-- Local : for mobile -->
<video poster="SiteFiles/2204/css/images/cover.jpg" id="bgvid" playsinline autoplay muted loop>
	<source src="{{Module.FieldValues.MobileVideo}}" type="video/mp4">
</video>



<!--Description: Select background videos for both desktop and mobile browsers. Desktop video must be a Vimeo link and mobile video must be a MP4 file hosted on SiteWrench.

single-line
label: Desktop Video (Vimeo link) Example: //player.vimeo.com/video/223309279
variable name: DesktopVideo

file
label: Mobile Video (MP4 video file in SiteWrench)
variable name: MobileVideo