Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Really responsive Youtube iFrame (width XOR height ) *Preview available here: https://www.thebouqs.com/en/content/8-how-it-works
#hero { width:100%;height:100%;background:url('{$img_ps_dir}cms/how-it-works/hero.jpg') no-repeat top center; }
.videoWrapper { position:relative;padding-bottom:56.25%;padding-top:25px;max-width:100%; }
@media (min-width:1000px) {
#hero { background-size:cover; }
}
@media (max-width:767px) {
#hero { width:100%;height:94%!important;background:url('{$img_ps_dir}cms/how-it-works/hero-mobile.jpg') no-repeat top center;background-position: 0 -155px;height: 273px!important;background-position:0 -209px; }
}
@media (max-width:540px) {
#hero { background-position:-178px -209px; }
}
@media screen and (min-width: 500px) and (min-height: 980px) {
#hero { height:50vh!important; }
}
<div id="hero">
<div class="container">
<div class="row-fluid">
<script src="https://www.youtube.com/iframe_api"></script>
<center>
<div class="videoWrapper">
<div id="player"></div>
</div>
</center>
<script>
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId:'xxxxxxxxxxx',playerVars: { controls:0,autoplay:0,disablekb:1,enablejsapi:1,iv_load_policy:3,modestbranding:1,showinfo:0,rel:0,theme:'light' }
} );
resizeHeroVideo();
}
</script>
</div>
</div>
</div>
var player = null;
$( document ).ready(function() {
resizeHeroVideo();
} );
$(window).resize(function() {
resizeHeroVideo();
});
function resizeHeroVideo() {
var content = $('#hero');
var contentH = viewportSize.getHeight();
contentH -= 158;
content.css('height',contentH);
if(player != null) {
var iframe = $('.videoWrapper iframe');
var iframeH = contentH - 150;
if (isMobile) {
iframeH = 163;
}
iframe.css('height',iframeH);
var iframeW = iframeH/9 * 16;
iframe.css('width',iframeW);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.