<section class="homepage_hero right">
<div class="hero_text">
<h1>This is Page Heading</h1>
<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</p>
<div class="hero-buttons">
<a href="#" class="btn btn-primary dark-grey" role="button">
<span class="button_text">Action Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div><!-- end hero-buttons -->
</div><!-- end hero_text -->
<div class="hero_video">
<div id="video-section-wrapper">
<div id="video">
<video id="bgvid" autoplay loop muted playsinline>
<source src="/video/Gliding_Shot_2.mp4" type="video/mp4">
<img src="/img/video-fallback.jpg" />
</video>
<div class="video-controls">
<button id="pause-btn" aria-pressed="false">
<i class="fa fa-play"></i>
<i class="fa fa-pause"></i>
<span class="sr-only">Pause Video</span>
</button>
</div>
<div class="mobile-background"></div>
</div>
</div> <!-- video-section-wrapper -->
</div><!-- end hero_img -->
</section>
<section class="homepage_hero {{ align_text }}">
<div class="hero_text">
<h1>{{ hero_heading }}</h1>
<p>{{ hero_text }}</p>
<div class="hero-buttons">
{% for button in buttons %}
{% include "@a_tag" with button only %}
{% endfor %}
</div><!-- end hero-buttons -->
</div><!-- end hero_text -->
<div class="hero_video">
<div id="video-section-wrapper">
<div id="video">
<video id="bgvid" autoplay loop muted playsinline>
<source src="{{ hero_video_src }}" type="video/mp4">
<img src="{{ hero_video_fallback }}" />
</video>
<div class="video-controls">
<button id="pause-btn" aria-pressed="false">
<i class="fa fa-play"></i>
<i class="fa fa-pause"></i>
<span class="sr-only">Pause Video</span>
</button>
</div>
<div class="mobile-background"></div>
</div>
</div> <!-- video-section-wrapper -->
</div><!-- end hero_img -->
</section>
{
"hero_video_src": "/video/Gliding_Shot_2.mp4",
"hero_video_fallback": "/img/video-fallback.jpg",
"hero_heading": "This is Page Heading",
"hero_text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>",
"align_text": "right",
"buttons": {
"1": {
"text": "Action Button",
"url": "#",
"color": "dark-grey"
}
}
}
(function (Drupal) {
Drupal.behaviors.video_autoplay = {
attach: function (context) {
var videos = document.querySelectorAll("video");
var videosPauseButton = document.querySelector("#pause-btn");
var localStorageKey = 'eng2017.noAutoplayVideo';
function videosShouldAutoplay() {
return (!window.matchMedia('(prefers-reduced-motion: reduce)').matches &&
window.localStorage.getItem(localStorageKey) != 'true');
}
function videosPaused() {
return videosPauseButton.getAttribute("aria-pressed") === 'true';
}
function toggleButton(state) {
var state = state || !videosPaused();
videosPauseButton.setAttribute("aria-pressed", state);
}
function handleClick() {
if (videosPaused()) {
playVideos();
}
else {
pauseAllVideos();
}
toggleButton();
}
function pauseAllVideos() {
videos.forEach(function (video) {
video.classList.add("is-paused");
video.pause();
});
window.localStorage.setItem(localStorageKey, true);
}
function playVideos() {
document.querySelectorAll("video.is-paused:not([controls])").forEach(function (video) {
video.classList.remove("is-paused");
video.play();
});
window.localStorage.setItem(localStorageKey, false);
}
function init() {
if (!videosShouldAutoplay()) {
videos.forEach(function (video) {
if (video.hasAttribute("autoplay")) {
video.addEventListener("canplay", function () {
if (!video.hasAttribute("poster")) {
this.currentTime = 1;
}
this.pause();
video.classList.add("is-paused");
});
}
});
toggleButton(false);
pauseAllVideos();
}
}
init();
videosPauseButton.addEventListener("click", handleClick);
}
}
})(Drupal);
.homepage_hero {
.hero_video {
order: 1;
width: 100%;
@include media-breakpoint-up(lg) {
width: 50%;
}
.mobile-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-position: center center;
display: block;
}
#video {
position: relative;
color: #fff;
background-color: #000;
background-size: cover;
background-position: center center;
background-image: url('../img/video-fallback.jpg');
padding-bottom: 56.25%;
video {
position: absolute;
width: 100%;
max-width: 100%;
top: 0;
left: 0;
height: 100%;
.not-front & {
display: none;
}
}
.video-controls {
position: absolute;
top: 25px;
right: 25px;
z-index: 99;
button {
cursor: pointer;
background-color: unset;
border: 0;
&:hover,
&:focus {
.fa {
opacity: 1;
}
}
.fa {
color: #fff;
font-size: 36px;
opacity: .8;
}
&[aria-pressed="false"] {
.fa-play {
display: none;
}
}
&[aria-pressed="true"] {
.fa-pause {
display: none;
}
}
}
}
}
.html5-video-player {
background-color: #1b75bc !important;
}
}
&.Left {
.hero_text {
border-top: 3px solid $accent_color;
border-top: 3px solid var(--accent_color, $accent_color);
@include media-breakpoint-up(lg) {
order: 1;
border-top: 0;
border-right: 3px solid $accent_color;
border-right: 3px solid var(--accent_color, $accent_color);
}
}
.hero_video {
@include media-breakpoint-up(lg) {
order: 1;
}
}
}
&.Right {
.hero_text {
border-top: 3px solid $accent_color;
border-top: 3px solid var(--accent_color, $accent_color);
@include media-breakpoint-up(lg) {
order: 2;
border-top: 0;
border-left: 3px solid $accent_color;
border-left: 3px solid var(--accent_color, $accent_color);
}
}
.hero_video {
@include media-breakpoint-up(lg) {
order: 1;
}
}
}
}
Display homepage hero where the video is 50% of the width along with the content. On a mobile display it becomes a stacked component.