<div class="pageheader-video" style="background-image: url(../../.html )">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<div class="pageheader-content">
<h1 class="heading-page heading-page--pageheader ">Pageheader video</h1>
<p class="paragraph paragraph--pageheader ">Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
<button type="button" class="button button--large">
See more
</button>
</div>
</div>
</div>
</div>
</div>
<div class="pageheader-video" style="background-image: url({{ path '{{backgroundImagePath}}' }} )">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
{{ render '@pageheader-content' content }}
</div>
</div>
</div>
{{#if selfHostVideoMp4Path}}
<video class="pageheader-video__video" src="{{ selfHostVideoMp4Path }}" type="video/mp4" autoplay muted loop playsinline>
{{/if}}
{{#if selfHostVideoWebmPath}}
<video class="pageheader-video__video" src="{{ selfHostVideoWebmPath }}" type="video/webm" autoplay muted loop playsinline>
{{/if}}
{{#if youtubeId}}
<div class="video-wrapper" data-youtube-id="{{ youtubeId }}">
<div class="tv">
<div id="player" class="screen"></div>
</div>
</div>
{{/if}}
{{#if vimeoId}}
<div class="vimeo-wrapper">
<iframe src="https://player.vimeo.com/video/{{ vimeoId }}?autoplay=1&loop=1&color=000000&title=0&byline=0&portrait=0&muted=1&controls=0" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
{{/if}}
</div>
{
"content": {
"header": {
"text": "Pageheader video"
},
"description": {
"text": "Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Quisque velit nisi, pretium ut lacinia in, elementum id enim."
},
"button": {
"text": "See more"
}
}
}
function PageheaderVideoYoutube() {
this.videoStart = 0;
this.player;
this.youtubeId;
const youtubeVideoWrapper = document.querySelector('.tv');
if (youtubeVideoWrapper != null) {
this.youtubeId = document.querySelector('.video-wrapper').getAttribute('data-youtube-id');
const tag = document.createElement('script');
tag.src = 'https://www.youtube.com/player_api';
const lastScriptTag = document.getElementsByTagName('script')[
document.getElementsByTagName('script').length - 1];
lastScriptTag.parentNode.insertBefore(tag, lastScriptTag);
}
this.onPlayerReady = (event) => {
this.vidRescale();
event.target.mute();
event.target.seekTo(this.videoStart);
};
this.onPlayerStateChange = (el) => {
const tv2 = document.getElementById('player');
if (el.data === 1) {
tv2.classList.add('active');
} else if (el.data === 0) {
this.player.seekTo(this.videoStart);
}
};
this.vidRescale = function () {
const tvScreen = document.querySelector('.tv .screen');
if (tvScreen != null) {
const width = window.innerWidth + 200;
const height = window.innerHeight + 200;
if (width / height > 16 / 9) {
this.player.setSize(width, (width / 16) * 9);
tvScreen.style.left = '0px';
} else {
this.player.setSize((height / 9) * 16, height);
tvScreen.style.left = -(tvScreen.offsetWidth - width) / 2;
}
}
};
this.onYouTubeIframeAPIReady = function () {
/*eslint-disable */
this.player = new YT.Player('player', {
videoId: this.youtubeId,
playerVars: {
autoplay: 0,
autohide: 1,
loop: 1,
modestbranding: 1,
rel: 0,
showinfo: 0,
controls: 0,
disablekb: 1,
enablejsapi: 0,
iv_load_policy: 3
},
events: {
onReady: this.onPlayerReady,
onStateChange: this.onPlayerStateChange
}
});
};
}
const PhV = new PageheaderVideoYoutube();
function onYouTubeIframeAPIReady() {
PhV.onYouTubeIframeAPIReady();
}
window.addEventListener(
'load',
() => {
if (document.querySelector('#player')) {
onYouTubeIframeAPIReady();
PhV.vidRescale();
}
},
true
);
window.addEventListener(
'resize',
() => {
PhV.vidRescale();
},
true
);
/**
* Component: pageheader-video
*/
:root {
--hero-text-color: var(--color-white);
--video-background-color: var(--color-black);
--video-content-opacity: 70%;
--video-height: 600px;
}
.pageheader-video {
position: relative;
display: flex;
align-items: center;
height: calc(var(--video-height) / 1.5);
overflow: hidden;
background-size: cover;
@media (--viewport-sm-min) {
height: var(--video-height);
}
&__video {
display: none;
@media (--viewport-sm-min) {
display: block;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
transform: translateX(-50%) translateY(-50%);
object-fit: contain;
}
&--iframe-video {
&::before {
display: block;
content: '';
width: 100%;
padding-top: calc((9 / 16) * 100%);
}
iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
}
//vimeo
.vimeo-wrapper {
display: none;
@media (--viewport-sm-min) {
display: block;
width: 100%;
pointer-events: none;
overflow: hidden;
position: absolute;
height: 100%;
}
}
.vimeo-wrapper iframe {
width: 100vw;
height: 56.25vw;
/* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
min-height: 100vh;
min-width: 177.77vh;
/* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
//youtube
.video-wrapper {
display: none;
@media (--viewport-sm-min) {
display: block;
position: absolute;
width: 100%;
margin: 0;
height: 100%;
z-index: 0;
overflow: hidden;
}
}
.tv {
display: none;
@media (--viewport-sm-min) {
display: block;
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 0.5s;
&.active {
opacity: 1;
}
}
}
NB! The default pageheader-video does not contain a video. This is because each variation specify how the video is made, therefore you need to choose a variant to see a video. So the default is working as intended :)