Skip to content

Instantly share code, notes, and snippets.

@philbar
Forked from johnnyopao/youtube-vb.js
Last active August 29, 2015 14:14
Show Gist options
  • Save philbar/b5dba2adea7e078d4730 to your computer and use it in GitHub Desktop.
Save philbar/b5dba2adea7e078d4730 to your computer and use it in GitHub Desktop.
<!--[if lte IE 8]>
<script>
var oldIEhasFlash = false;
try {
oldIEhasFlash = Boolean(new ActiveXObject('ShockwaveFlash.ShockwaveFlash'));
} catch(exception) {
oldIEhasFlash = ('undefined' != typeof navigator.mimeTypes['application/x-shockwave-flash']);
}
</script>
<![endif]-->
<script>
// Youtube Video Background for Unbounce. V1.1
// lpVideoBG('#SectionID', 'YoutubeVideoID', width, height, muted);
// Use '#lp-pom-root' for a full page video background
if (typeof(oldIEhasFlash) === 'undefined' || oldIEhasFlash === null || oldIEhasFlash === true ) {
lpVideoBG('#lp-pom-block-9', '2XX5zDThC3U', 560, 315, 0);
}
function lpVideoBG(pageSectionID, youtubeVideoCode, videoWidth, videoHeight, muted) {
var framedVideoDivID = 'framedVideo-' + pageSectionID.substr(1);
var contentDivID = pageSectionID;
var videoPosition = 'fixed';
if (pageSectionID != '#lp-pom-root') {
contentDivID = pageSectionID + ' .lp-pom-block-content';
videoPosition = 'absolute';
}
function resizeVideo() {
var widthOfSection = $(pageSectionID).width();
var heightOfSection = $(pageSectionID).height();
if (pageSectionID == '#lp-pom-root') {
heightOfSection = $(window).height();
}
var newRatio = widthOfSection/videoWidth;
//Obtain new height and vertical offset
var newHeight = videoHeight * newRatio;
//Size up video if less then section height
if (newHeight <= heightOfSection) {
var heightRatio = heightOfSection/newHeight;
newHeight = heightOfSection * heightRatio;
}
//Adjust width based on new height
var widthRatio = newHeight/videoHeight;
var newWidth = videoWidth * widthRatio;
var widthOffset = ((newWidth-widthOfSection) / 2);
var heightOffset = ((newHeight-heightOfSection) / 2);
//Offset and resize video
$("#" + framedVideoDivID)[0].setAttribute("height", newHeight);
$("#" + framedVideoDivID)[0].setAttribute("width", newWidth);
$("#" + framedVideoDivID).css({ top: -heightOffset, left: -widthOffset, position:videoPosition });
}
$(contentDivID).css({"width":"100%", "margin-left":"0", "overflow":"hidden"});
$(contentDivID).append('<div style="height:100%;width:100%;position:absolute; top:0px"><iframe id="' + framedVideoDivID + '" width="100%" height="100%" src="//www.youtube.com/embed/' + youtubeVideoCode + '?autoplay=1&controls=0&iv_load_policy=3&disablekb=1&fs=0&loop=1&modestbranding=1&rel=0&showinfo=0&playlist=' + youtubeVideoCode + '&enablejsapi=1" frameborder="0" allowfullscreen style="display:block; visibility:hidden; "></iframe></div>');
$(contentDivID).append('<div style="height:100%;width:100%;position:absolute; top:0px"></div>');
resizeVideo();
$( window ).resize(function() {
resizeVideo();
});
//Append events to existing Youtube JS functions
var originalOnPlayerReady = onPlayerReady;
onPlayerReady = function(event) {
originalOnPlayerReady(event);
if (muted == 1) {
event.target.mute();
}
};
var originalOnPlayerStateChange = onChangedState;
onChangedState = function(event) {
originalOnPlayerStateChange(event);
if (event.data == YT.PlayerState.PLAYING) {
document.getElementById(framedVideoDivID).style.visibility = 'visible';
}
};
var player;
var originalYouTubeReady = onYouTubeIframeAPIReady;
onYouTubeIframeAPIReady = function() {
originalYouTubeReady();
player = new YT.Player(framedVideoDivID, {
loop: '1',
events: {
'onReady': onPlayerReady,
'onStateChange': onChangedState
}
});
};
}
//Load up Youtube Javascript API
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
}
function onPlayerReady(event) {
}
function onChangedState(event) {
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment