Full-width Video

Here is the code to create a full-width video on a site.

HTML: Part 1

Place this code where you want the video to display.

<div class="vimeovideo">
    <iframe class="vimeo" src="video url here" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div>

CSS: Part 2

Then find custom.scss.liquid and past this code underneath the HOME styles comment or if you needed, create a comment then place code underneath.

/*================================
==================================
HOME
==================================
================================*/

	.vimeovideo {
	  height: 35em;
	  position: relative;
	  overflow: hidden;
	  width: 100%;
	  &:after {
	    content: '';
	    background: linear-gradient(45deg,rgba(0, 0, 0, 0.6) 0,rgba(0, 0, 0, 0) 80%);
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    z-index: 1;
	  }
	  
	  > iframe {
	    position: absolute;
	    left: 0;
	    right: 0;
	    height: 2000em; // Don't like this fixed number
	    margin-top: -1000em; // Half the height
	    top: 50%;
	    width: 100%;
	  }
	}

Javascript: Part 3

Last step you'll need to find _theme.js under the assets folder and place this code between document ready.  

	var vimeoframe = $('.vimeo')[0];
	var vimeo = $f(vimeoframe);
	// When the player is ready, add listeners for pause, finish, and playProgress
	vimeo.addEvent('ready', function(id) {
		// Set the API player
		vimeo.api('setVolume', 0);
		vimeo.api('play');
	});