youtube auto play Code

See the Pen Responsive Youtube Background v.2 by koboso (@koboso) on CodePen.

HTML

<div class="cover">
 


<div class="video-wrapper" data-video-id="RrvdjyIL0fA"   data-video-height-add="100">
  <div class="video-overlay" style="background-color: #000; opacity: .70"></div>
  <div class="tv">
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player" class="screen"></div>
  </div>
</div>

CSS

 

@import "bourbon";

.cover {
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
	position: absolute;
  margin: auto;
	top: 10%;
	left: 0;
  right: 0;
  bottom: 0;
	z-index: 100;
	width: 50%;
  text-align: center;
  h2 {
    font-size: 36px;
    font-weight: 100;
    color: #fff;
    line-height: 1.3em;
    margin-bottom: 2rem;
  }
  p {
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    line-height: 1.6em;
    margin-bottom: 1em;
  }
  a {
    color: #cadecb;
  }
}

/* This is the SCSS you'll need */

.video-wrapper {
	position: relative;
	width: 100%;
	margin: rem-calc(0 0 54.5);
  min-height: rem(500);
	overflow: hidden;
}
.video-overlay {
	height: 100%;
  width: 100%;
	opacity: .8;
	position: absolute;
	z-index: 2;
}
.video-expand {
	color: white;
	font-size: rem(18);
	line-height: 1em;
	opacity: .4;
	position: absolute;
	top: rem(15);
	right: rem(15);
	z-index: 3;
	&:hover {
		@include transition(all 400ms ease-in-out);
	}
}
.tv {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: hidden;
	.screen {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		margin: auto;
		opacity: 0;
		transition: opacity .5s;
		&.active {
			opacity: 1;
		}
	}
}

JavaScript 






// Grab data attributes from video-wrapper


var videoID = $(".video-wrapper").data("video-id");
var videoYouTubeLink = $(".video-wrapper").data("video-youtube-link");
var videoStart = $(".video-wrapper").data("video-start");
var videoEnd = $(".video-wrapper").data("video-end");
var videoWidthAdd = $(".video-wrapper").data("video-width-add");
var videoHeightAdd = $(".video-wrapper").data("video-height-add");


// Prepend link to Youtube video if data attr is yes


if (videoYouTubeLink === 'y') {
	$(".video-wrapper").prepend('<a href="https://www.youtube.com/watch?v=' + videoID + '" class="video-expand" target="_blank">View on Youtube</a>');
}


// 2. This code loads the IFrame Player API code asynchronously.


var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


// 3. This function creates an <iframe> (and YouTube player) after the API code downloads.


var player;


function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	videoId: videoID,
	playerVars: {
		'autoplay': 0,
		'autohide': 1,
		'end': videoEnd,
		'loop': 1,
		'modestbranding': 1,
		'rel': 0,
		'showinfo': 0,
		'controls': 0,
		'disablekb': 1,
		'enablejsapi': 0,
		'iv_load_policy': 3
	},
	events: {
		'onReady': onPlayerReady,
		'onStateChange': onPlayerStateChange
	}
	});
}


// 4. The API will call this function when the video player is ready.


function onPlayerReady(event) {
	vidRescale();
	event.target.mute();
	event.target.seekTo(videoStart);
}


// 5. The API calls this function when the player's state changes.


function onPlayerStateChange(e) {
	if (e.data === 1){
		$('#player').addClass('active');
	} else if (e.data === 0){
		player.seekTo(videoStart);
	}
}


// This function scales the video to window size and uses additional values to push video beyong window size


function vidRescale(){
	console.log('video reloaded');
	var w = $(window).width() + videoWidthAdd,
		h = $(window).height() + videoHeightAdd;
	if (w/h > 16/9) {
		player.setSize(w, w/16*9);
		$('.tv .screen').css({'left': '0px'});
	} else {
		player.setSize(h/9*16, h);
		$('.tv .screen').css({'left': -($('.tv .screen').outerWidth()-w)/2});
	}
}


// Reloads the video on load and resize


$(window).on('resize', function(){
	vidRescale();
});