Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
$banner-play-button-background: $primary-color;
$banner-play-button-background-hover: $secondary-color;
$banner-play-button-box-shadow: 0 0 1px 0 rgba(80, 85, 103, 0.39),0 7px 9px 0 rgba(94, 94, 94, 0.18);
$banner-play-button-size: 5rem;
$banner-play-button-background-size: 40%;
$banner-play-button-background-position: 55% center;
$banner-play-button-color: $white;
$banner-play-button-image: url('assets/images/graphics/icone-play.svg');
$hero-bg-color: $light-gray;
.hero--video {
height: 50vh;
width: 100vw;
background-color: $hero-bg-color;
@include breakpoint(medium) {
height: 100vh;
}
}
.inner-hero-video {
position: relative;
height: 56.25vw;
}
.button--play--banner {
position: absolute;
left: 50%;
margin-left: -2.5rem;
top: 50%;
margin-top: -2.5rem;
}
.wrapper-video--banner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
iframe {
width: 100%;
height: 100%;
}
}
.video-poster {
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
cursor: pointer;
border: 0;
outline: none;
background-color: $hero-bg-color;
background-position: 100% 50%;
background-size: 100%;
background-repeat: no-repeat;
text-indent: -999em;
overflow: hidden;
opacity: 1;
-webkit-transition: opacity 800ms, height 0s;
-moz-transition: opacity 800ms, height 0s;
transition: opacity 800ms, height 0s;
-webkit-transition-delay: 0s, 0s;
-moz-transition-delay: 0s, 0s;
transition-delay: 0s, 0s;
@include breakpoint(medium) {
background-position: 50% 50%;
background-size: 60%;
}
@include breakpoint(large) {
background-size: 50%;
}
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: $banner-play-button-size;
height: $banner-play-button-size;
display: block;
margin: -$banner-play-button-size/2 0 -$banner-play-button-size/2 0;
border-radius: 50%;
box-shadow: $banner-play-button-box-shadow;
background-color: $banner-play-button-background;
background-image: $banner-play-button-image;
background-size: $banner-play-button-background-size;
background-repeat: no-repeat;
background-position: $banner-play-button-background-position;
cursor: pointer;
transition: 0.4s all ease-in-out;
border: 3px solid transparent;
}
&:hover {
&::before {
// background-color: $banner-play-button-background-hover;
// border-color: $banner-play-button-background-hover;
// transform: scale(1.1);
}
}
}
.video-wrapper-active {
.video-poster {
opacity: 0;
height: 0;
-webkit-transition-delay: 0s, 800ms;
-moz-transition-delay: 0s, 800ms;
transition-delay: 0s, 800ms;
}
}
#videoStop {
position: absolute;
display: none;
top: 0;
bottom: 5rem;
right: 0;
left: 0;
width: 100%;
z-index: 4;
overflow: hidden;
text-indent: -9999px;
.video-wrapper-active & {
display: block;
}
// this class is added by assets/scripts/util/detectTouch.js
// lets not prevent touch users from playing video on their device ;)
.user-is-touching & {
display: none !important;
}
}
<section class="hero">
<div class="hero--video clearfix">
<div class="inner-hero-video">
<div id="wrapperVideoBanner" class="wrapper-video--banner video-wrapper videoWrapper169">
<iframe class="video-iframe" width="1920" height="1080" src="" frameborder="0" allowTransparency="true" allowfullscreen data-src="https://www.youtube.com/embed/MEr4MvStkQo?autoplay=1&amp;showinfo=0"></iframe>
<!-- the poster frame - in the form of a button to make it keyboard accessible -->
<button id="videoPlay" class="video-poster" style="background-image:url({{get_template_directory_uri() . '/assets/images/placeholders/illu.jpg'}});">Play video</button>
<button id="videoStop">Stop video</button>
</div>
</div>
</div>
</section>
// This load the youtube video on click on the poster
export function loadVideoOnClick() {
// poster frame click event
$(document).on('click', '#videoPlay', function(ev) {
ev.preventDefault();
var $poster = $(this);
var $wrapper = $poster.closest('.video-wrapper');
videoPlay($wrapper);
// console.log($(this));
});
$(document).on('click', '.video-wrapper-active', function(ev) {
ev.preventDefault();
videoStop();
console.log('#videoStop');
});
}
// play the targeted video (and hide the poster frame)
function videoPlay($wrapper) {
var $iframe = $wrapper.find('.video-iframe');
var src = $iframe.data('src');
// hide poster
$wrapper.addClass('video-wrapper-active');
// add iframe src in, starting the video
$iframe.attr('src', src);
}
// stop the targeted/all videos (and re-instate the poster frames)
export function videoStop() {
$('#wrapperVideoBanner').removeClass('video-wrapper-active');
// remove youtube link, stopping the video from playing in the background
$('.video-iframe').attr('src','');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment