Skip to content

Instantly share code, notes, and snippets.

@johnnyopao
Last active December 15, 2022 11:43
Show Gist options
  • Save johnnyopao/3955498aee461c4b3e75 to your computer and use it in GitHub Desktop.
Save johnnyopao/3955498aee461c4b3e75 to your computer and use it in GitHub Desktop.
Youtube Video Background for Unbounce pages
<script>
// Youtube Video Background for Unbounce. V1.3.5
// lpVideoBG('#SectionID', 'YoutubeVideoID', width, height, muted);
// Use '#lp-pom-root' for a full page video background
lpVideoBG('#lp-pom-block-9', 'vLUNWYt3q1w', 560, 315, 0);
function lpVideoBG(pageSectionID, youtubeVideoCode, videoWidth, videoHeight, muted) {
var onMobile = navigator.userAgent.match(/(Android|iPod|iPhone|iPad|iemobile|blackberry)/);
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"});
var displayAttr = 'block';
if (onMobile) {
displayAttr = 'none';
}
var iframeDiv = '<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:' + displayAttr + '; visibility:hidden; "></iframe></div>';
var overlayDiv = '<div style="height:100%;width:100%;position:absolute; top:0px"></div>';
if (pageSectionID === '#lp-pom-root') {
$(contentDivID).prepend(overlayDiv);
$(contentDivID).prepend(iframeDiv);
} else {
$(contentDivID).append(iframeDiv);
$(contentDivID).append(overlayDiv);
$(pageSectionID + '-color-overlay').appendTo(contentDivID);
}
resizeVideo();
$( window ).resize(function() {
resizeVideo();
});
//Append events to existing Youtube JS functions
var originalOnPlayerReady = onPlayerReady;
onPlayerReady = function(event) {
originalOnPlayerReady(event);
player.setLoop(true);
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';
} else if (event.data == YT.PlayerState.ENDED) {
document.getElementById(framedVideoDivID).style.visibility = 'hidden';
}
};
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