Clicking the fade doesn't around lightbox doesn't close it - javascript

I want to create a button action where upon click, a video light box opens and when the visitor clicks anywhere else outside of the video (the fade), the video closes. So far, other features work except when I click on fade near the edge of the video, it doesn't close. So here's my html, css & js.
<div id="motionVideo">
<div class='motionButton' onclick="motionLightbox_open();"></div>
<div id="motionLight">
<video id="motionShowreel" width='1280' height='720' controls>
<source src="./motionGraphic.mp4" type="video/mp4">
<!--Browser does not support <video> tag -->
</video>
</div>
<div id="motionFade" onClick="motionLightbox_close();">
</div>
<div class="motionShowreel">
<video src="./motionGraphic.mp4" width="100%" height="50%"></video>
</div>
</div>
#motionVideo {
/*background: #ffc8b2;*/
grid-area: motionVideo;
}
.motionButton{
background-image:url(./mg.png);
background-position:center center;
background-repeat: no-repeat;
background-size: 70%;
width:100%;
height:100%;
/*position: relative;
top:20vh;
left:-20vw;*/
}
.motionShowreel{
width: 100%;
height: 100%;
position: relative;
top: -120vh;
left: 0vw;
z-index: -1;
}
#motionFade {
display: none;
position: fixed;
width: 100%;
height: 100%;
background-color: black;
top:0%;
left:0%;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
#motionLight {
display: none;
position: absolute;
padding: 10vw;
top:0;
align-items: center center;
justify-content: center center;
z-index: 1002;
cursor: pointer;
}
window.document.onkeydown = function(e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
motionLightbox_close();
}
}
function motionLightbox_open() {
var lightBoxVideo = document.getElementById("motionGraphic");
window.scrollTo(0,150);
document.getElementById('motionLight').style.display = 'block';
document.getElementById('motionFade').style.display = 'block';
lightBoxVideo.pause();
}
function motionLightbox_close() {
var lightBoxVideo = document.getElementById("motionGraphic");
document.getElementById('motionLight').style.display = 'none';
document.getElementById('motionFade').style.display = 'none';
lightBoxVideo.pause();
}
When I try clicking on the fade near the edge of the video, the video doesn't close. Only by scrolling down further and clicking does it close. How do I fix this issue?

Seems like div by ID motionLight is occupying the space around the player (it has a huge padding). Try adding the close handler also to that div:
<div id="motionLight" onclick="motionLightbox_close()">
</div>
Working example
window.document.onkeydown = function(e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
motionLightbox_close();
}
}
function motionLightbox_open() {
var lightBoxVideo = document.getElementById("motionGraphic");
window.scrollTo(0,150);
document.getElementById('motionLight').style.display = 'block';
document.getElementById('motionFade').style.display = 'block';
lightBoxVideo.pause();
}
function motionLightbox_close() {
var lightBoxVideo = document.getElementById("motionGraphic");
document.getElementById('motionLight').style.display = 'none';
document.getElementById('motionFade').style.display = 'none';
lightBoxVideo.pause();
}
#motionVideo {
/*background: #ffc8b2;*/
grid-area: motionVideo;
}
.motionButton{
background-color: #EEEEEE;
width:100%;
height:100%;
width: 100px;
height: 30px;
/*position: relative;
top:20vh;
left:-20vw;*/
}
.motionShowreel{
width: 100%;
height: 100%;
position: relative;
top: -120vh;
left: 0vw;
z-index: -1;
}
#motionFade {
display: none;
position: fixed;
width: 100%;
height: 100%;
background-color: black;
top:0%;
left:0%;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
#motionLight {
display: none;
position: absolute;
padding: 10vw;
top:0;
align-items: center center;
justify-content: center center;
z-index: 1002;
cursor: pointer;
}
<div id="motionVideo">
<div class="motionButton" onclick="motionLightbox_open();">Open</div>
<div id="motionLight" onclick="motionLightbox_close()">
<video id="motionShowreel" width='1280' height='720' controls>
<source src="./motionGraphic.mp4" type="video/mp4">
<!--Browser does not support <video> tag -->
</video>
</div>
<div id="motionFade" onClick="motionLightbox_close();">
</div>
<div class="motionShowreel">
<video id="motionGraphic" src="./motionGraphic.mp4" width="100%" height="50%"></video>
</div>
</div>

Related

Trying to start/trigger an iframe with a JS game only when needed in my HTML5 page

I've learned the basic of HTML5, CSS and a little of JS.
I'm trying to make a site where I can show my projects and knowledge.
The thing is, I want to put 2 JS games that I made in the page, but I don't want them to load instantly with the page. so, I would like it to load only when I click on it.
The game: https://editor.p5js.org/snufupugos/full/jm8j5k5pC
How I got it on the page:
<section class="games"> <iframe src="https://editor.p5js.org/snufupugos/embed/jm8j5k5pC" class="freeway" title="Remake Freeway"></iframe> </section>
The CSS:
.freeway{
background-color:rgba(0, 0, 0, 0.1);
width: 500px;
height: 400px;
margin: 2em auto;
border: 2px solid #801edb;
border-radius: 50px;
border-width: thick;
padding: 5px 5px;
}
My first Idea was to use an image, and then the hover to transform to the iframe, but I think it is not possible since it did not work.
Anyway, can someone help me with this? Any Idea how to do it?
Thank you.
function start(){
document.getElementById("frame").src = "https://editor.p5js.org/snufupugos/embed/jm8j5k5pC";
document.getElementById("imgs").remove();
var news = document.createElement("img");
news.setAttribute('id', 'stop');
news.setAttribute('onclick', 'stop();');
news.setAttribute('class', 'button');
news.setAttribute('width', '25px');
news.setAttribute('src', 'data:image/png;base64,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');
var element1 = document.getElementById("top");
element1.appendChild(news);
}
function stop(){
document.getElementById("frame").src = "";
document.getElementById("stop").remove();
var neww = document.createElement("img");
neww.setAttribute('id', 'imgs');
neww.setAttribute('onclick', 'start();');
neww.setAttribute('class', 'button');
neww.setAttribute('src', 'data:image/png;base64,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');
var element = document.getElementById("center");
element.appendChild(neww);
}
.border{
width: 500px;
height: 400px;
margin: 2em auto;
position: relative;
z-index: 9999999999;
}
.freeway{
width: 500px;
height: 400px;
background-color:rgba(0, 0, 0, 0.1);
border: 2px solid #801edb;
border-radius: 50px;
border-width: thick;
}
.show{
display: block;
}
.container {
position: absolute;
text-align: center;
z-index: -1;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.button {
cursor: pointer;
border: none;
}
.top-right {
position: absolute;
top: 11px;
right: 40px;
}
<section class="games">
<div class="border">
<div class="container">
<iframe src="" id="frame" class="freeway"></iframe>
<div id="top" class="top-right"></div>
<div id="center" class="centered">
<img class="button" src="data:image/png;base64,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" onclick="start();" id="imgs"/>
</div>
</div>
</div>
</section>
<script>
window.addEventListener("keydown", function(e) {
// space and arrow keys
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
e.preventDefault();
}
}, false);
</script>
Try this!

Z index issues with video and menu Div

So on mobile, in the research film page section, I have two videos and a div with some hidden text toggled to be seen or hidden with javascript. The contents of research film are organised by flexbox. On top of these videos and text is a fixed navbar that overlaps the top video "paper boys" . The fixed nav therefore doesn't allow the user to click on the video. The fixed Navbar doesn't respond to z-index (-100) toggled through javascript whenever the user clicks on the "more" button.
Here is the JS to trigger the menu and div to be seen -
const mediaQueryPhone = window.matchMedia('(max-width: 1000px)')
if (mediaQueryPhone.matches) {
let menuOpen = false;
morebtn.addEventListener('click', () => {
processMenu.classList.toggle('fadeMenu');
menuOpen = processMenu.classList.contains('fadeMenu');
if (!menuOpen) {
processMenu.style.touchAction = "none";
processMenu.style.pointerEvents = "none"
} else {
processMenu.style.touchAction = "auto";
processMenu.style.pointerEvents = "all"
}
})
const creditIcon = document.querySelector('.credit-icon');
const creditText = document.querySelector('.credit-text');
let creditOpen = false;
creditIcon.addEventListener('click', () => {
creditText.classList.toggle('hideElement');
creditOpen = creditText.classList.contains('hideElement');
if (!creditOpen) {
creditText.style.display = "block";
} else {
creditText.style.display = "none";
}
})
HTML page with 2 videos
<div class="mobile__header-controls">
<div class="mobile__nav">
<button class="mobile__more">+</button>
<div class="mobile__process-nav">
Show
About
Research Films
Stills
Lookbook
</div>
<div class="mobile__main-nav">
<a class="mabtn" href="/MA.html">MA</a>
<a class="capbtn" href="/capsule.html">Capsule</a>
<a class="babtn user-border" href="/BA.html">BA</a>
</div>
</div>
Back
</div>
<div id="researchFilm-ba" data-tab-content>
<div class="video-wrapper-ba align black-text fade-in">
<p>Dear You (2017)</p>
<video class="mood2" video controls poster="img/BA/Screenshot 2020-08-24 at 12.10.24 am.png"
preload="metadata">
<source src="/img/BA/dear you,.mp4" type="video/mp4">
</video>
</div>
<div id="paperBoys" class="video-wrapper-ba black-text fade-in">
<p>Paper Boys (2018)</p>
<video class="mood" video controls poster="/img/BA/Screenshot 2020-08-24 at 12.10.05 am.png"
preload="metadata">
<source src="/img/BA/Paper Boys.mp4" type="video/mp4">
</video>
</div>
<div class="credit-ba black-text">
<button class="credit-icon">(...)</button>
<div class="credit-text credtitBAMargin hideElement">
<p>
Thank you
to my team of helpers
<br><br>
and the following
<br><br>
Collaborators<br>
<br>Film produced with Taka Hata
<br>Accessories produced by Kristy Fan
<br>Soundtrack composed by Zacharias Wolfe
and Friends at Royal College of Music
<br><br>
Look Book
<br>Make Up by Kristina Pavlovic
<br>Look Book photographed by Simonas Berukstis
<br>Slime Making photographed by Oliver Vanes
<br><br>
Show
<br>Internal Show Make Up by Phoebe Walters
<br>Press Show Make Up by Mariko Yamamoto
<br>Supported by L’Oréal Professionnel
<br><br>
Models
<br>Yota Hoshi
<br>Masato Funaoka
<br>Ryan
<br>Youtian Zhang
<br>Tien Ai Guan
<br>Xander Ang
<br>Wing Fung
<br><br>
and the BAFCSM team</p>
</div>
</div>
</div>
CSS
.mobile__process-nav { // this is the menu dropdown styling
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 30vh;
height: calc(var(--vh, 1vh) * 30);
color: white;
border: 2px solid white;
opacity: 0;
transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
z-index: 0;
margin-top: 1rem;
margin-left: 2rem;
}
.fadeMenu {
opacity: 1;
}
#researchFilm-ba {
width: 100%;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
background-color: white;
flex-direction: column-reverse;
justify-content: flex-end;
}
.video-wrapper-ba {
width: 80vw;
height: 35vh;
height: calc(var(--vh, 1vh) * 35);
margin: 0;
margin-top: 2rem;
}
.align {
margin-top: -1.5rem;
}
#researchFilm-ba p,
#researchFilm p {
font-size: 1rem;
font-family: Helvetica, sans-serif;
font-style: italic;
margin-bottom: 0rem;
color: black;
}
.credit-ba {
position: absolute;
display: flex;
flex-direction: column;
margin-left: 80vw;
margin-top: -9vh;
margin-top: calc(var(--vh, 1vh) * -9);
}
.credit-text {
margin-left: -55vw;
width: 67vw;
background-color: white;
margin-top: 0vh;
margin-top: calc(var(--vh, 1vh) * 0);
display: none;
}
.credtitBAMargin {
margin-top: 10vh;
margin-top: calc(var(--vh, 1vh) * 10);
}
.credit-text p {
width: 60vw;
color: black;
}
.credit-icon {
padding: 0;
margin: 1.5rem;
}
#media not all and (pointer: coarse) {
.credit:hover .credit-text,
.credit-ba:hover .credit-text {
display: block;
}
.contact-a a:hover {
color: white;
}
.menu-container:hover .menu {
opacity: 1;
pointer-events: all;
-ms-transform: translateY(0);
transform: translateY(0);
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
outline: none;
}
.stockist p:hover {
background-color: black;
}
}

How to show HTML video overlays with VideoJS in fullscreen?

I have a quiz video overlay that shows up nicely when the videojs player is in standard mode: https://jsfiddle.net/c4nxdf38/
However, when entering fullscreen it disappears (probably behind the video).
I found an obsolete solution which specifies the z-index of the overlay to the maximum. It is not working in the latest Chrome and Firefox.
I found another solution to do the fullscreen with the parent, not the videoplayer itself, but it's not working with the videojs player setup.
Then I found a promising solution how to make overlay elements appear on fullscreen by setting position:absolute; and tried to implement it without success: https://jsfiddle.net/5Lqfyzh4/
HTML from my last attempt (see fiddle):
<div id="main-container">
<div id="overlays-wrap">
<div class="overlay-item" data-overlayid="59" data-time="41">
<p class="vo-question">
Welche Zahl ist die Summe bei 3 + 50 = 53?
</p>
<div class="vtask-choices-wrap">
<div class="vtask-choice-item">
<input class="vtask-choice" type="radio" name="quiz" id="59-a1" value="1" data-correct="0">
<label class="radio-tile" for="59-a1">
<span class="radio-tile-label">
3
</span>
</label>
</div>
<div class="vtask-choice-item">
<input class="vtask-choice" type="radio" name="quiz" id="59-a2" data-correct="0">
<label class="radio-tile" for="59-a2">
<span class="radio-tile-label">
50
</span>
</label>
</div>
<div class="vtask-choice-item">
<input class="vtask-choice" type="radio" name="quiz" id="59-a3" value="3" data-correct="1">
<label class="radio-tile" for="59-a3">
<span class="radio-tile-label">
53
</span>
</label>
</div>
</div> <!-- vtask-choices-wrap -->
<a class="buttonb vtask-btn-continue">Continue</a>
</div> <!-- overlay-item -->
</div>
<div id="videowrapper">
<video id="videoplay" class="video-js vjs-default-skin" controls preload="metadata" width="854" height="480" poster="" autoplay="true">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</video>
</div>
</div>
Javascript:
$(document).ready(function() {
var options = {
playbackRates: [1, 1.5, 2],
muted: true,
};
video = videojs('videoplay', options);
video.ready(function() {
/*
this.on('fullscreenchange',function() {
console.log('fullscreen event');
});
*/
}); // end video.ready
// OVERLAY PREPARE
// $('#overlays-wrap, .overlay-item').hide();
// OVERLAY INTERACTION
$('.radio-tile').click( function() {
// only show if not yet submitted, prevents submit then click again on radio-tile which would show the vtask-btn-continue
var submitted = $(this).closest('.overlay-item').hasClass('overlay-submitted');
if(!submitted)
{
$(this).parent().parent().next('.vtask-btn-continue').css('visibility', 'visible');
// make sure we check the radio button
$(this).prev('.vtask-choice').prop('checked', true);
}
});
$('.vtask-btn-continue').click( function() {
// hide continue button
$(this).css('visibility', 'hidden');
var overlay = $(this).closest('.overlay-item'); // $(this).parent()
overlay.hide();
});
}); // END ready
CSS:
#overlays-wrap {
position: absolute;
width: 100%;
height: 100%;
max-height:460px;
left: 0;
top: 0;
z-index: 2147483647;
}
.overlay-item {
position: absolute;
top: 0;
color: #FFF;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.85);
width: 100%;
height: 100%;
padding: 0;
z-index: 2147483647;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
backface-visibility: hidden;
}
.overlay-item .vo-question {
margin: 10px 0 40px 0;
width: 80%;
text-align: center;
line-height: 1.5;
}
.vtask-choices-wrap {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-evenly;
width: 100%;
max-width: 1000px;
min-height: 10rem;
}
.vtask-choice-item .vtask-choice {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.radio-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border: 2px solid #079ad9;
border-radius: 5px;
padding: 1rem;
transition: transform 300ms ease;
background: rgba(0,0,0,0.5);
z-index: 500;
cursor: pointer;
font-size: 18px;
text-align: center;
}
.vtask-btn-continue {
color: #FFFFFF!important;
border-color: #2B78C5;
border-bottom-color: #2a65a0;
text-decoration: none;
text-shadow: none;
color: #FFF;
background: #39F;
margin-top: 40px;
padding: 10px 20px;
font-family: Arial,sans-serif;
font-size: 16px;
}
/* FIX according https://stackoverflow.com/a/13388579/1066234 */
#videoplay {
position: absolute;
left: 0px;
top: 0px;
min-height: 100%;
min-width: 100%;
z-index: 9997;
}
#overlays-wrap {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
z-index: 9998;
}
#main_container {
float: left;
position: relative;
left:0;
top:0;
}
Interestingly, with the videojs plugin at https://github.com/brightcove/videojs-overlay the fullscreen overlays seem to work even on fullscreen. But I cannot figure out how it is doing it. – Demo: http://www.xfaktor.com/overlay/overlay_kroger.html – I have more complex HTML for my overlays and cannot use this plugin.
What is the solution for this video/videojs problem?
Probably it would be best if you can help, having the starting point of this fiddle (my recent implementation): https://jsfiddle.net/w5f7mk19/ Thanks!
The problem appears to be, that this library wraps the video in an additional div, and makes that div fullscreen - but your #overlays-wrap element is outside of that element, and I don’t think z-index is supposed to change anything about that(?).
Putting the overlay directly into #videowrapper in the source code doesn’t do the trick - the player library takes #videoplay, creates the wrapper div and puts the id on that. (It changes the id of the video element itself to #videoplay_html5_api, so no conflict in that regard.) The new div #videoplay becomes fullscreen, but #overlays-wrap still only is a sibling in the DOM, so outside of the fullscreen element.
But if you move #overlays-wrap into #videoplay after the player has initialized, it seems to work:
video = videojs('videoplay', options); // wraps video element into div#videoplay
$('#overlays-wrap').appendTo($('#videoplay')); // append #overlays-wrap to div#videoplay
https://jsfiddle.net/pw89cjqe/

Append canvas with parent's height creates scrollbars

I have problem with canvas tag. I need to append it into parent div. But when I set precise dimensions of parent and embed canvas tag, I get scrollbars. When I do same think with div, it works good. Here is fiddle:
https://jsfiddle.net/57yovrkx/4/
and here is code:
$(function() {
var content1 = $('#content1');
var div = $('<div/>', {width: content1[0].clientWidth, height: content1[0].clientHeight});
content1.append(div);
var content2 = $('#content2');
var canvas = $('<canvas/>', {width: content2[0].clientWidth, height: content2[0].clientHeight});
content2.append(canvas);
})
* {
box-sizing: border-box;
border: 0;
margin: 0;
padding: 0;
}
#wrap1, #wrap2 {
display: flex;
flex-direction: column;
position: absolute;
left: 0;
right: 0;
overflow: auto;
}
#wrap1 {
top: 0;
bottom: 50%;
}
#wrap2 {
top: 50%;
bottom: 0;
}
.header {
flex: 0 0 2rem;
background: darkgrey;
}
#content1, #content2 {
flex: 1;
}
#content1 {
background: lightblue;
}
#content2 {
background: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap1">
<div class="header">
Some header
</div>
<div id="content1">
</div>
</div>
<div id="wrap2">
<div class="header">
Some header
</div>
<div id="content2">
</div>
</div>
Does anybody knows why?
Setting canvas.style.height = '100%'; before you append the canvas seems to do the trick.
https://stackoverflow.com/a/10215724/1482623

How to add a background image for mobile devices with video background?

So I have this video background made for a website. Now I don't really know how I turn my CSS so it gives a background image for tablets and mobile devices instead of the video.
I hope anyone can help me out with this.
Thanks in advance.
$( document ).ready(function() {
// Resive video
scaleVideoContainer();
initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');
$(window).on('resize', function() {
scaleVideoContainer();
scaleBannerVideoSize('.video-container .poster img');
scaleBannerVideoSize('.video-container .filter');
scaleBannerVideoSize('.video-container video');
});
});
/** Reusable Functions **/
/********************************************************************/
function scaleVideoContainer() {
var height = $(window).height();
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css('height',unitHeight);
}
function initBannerVideoSize(element){
$(element).each(function(){
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
});
scaleBannerVideoSize(element);
}
function scaleBannerVideoSize(element){
var windowWidth = $(window).width(),
windowHeight = $(window).height(),
videoWidth,
videoHeight;
console.log(windowHeight);
$(element).each(function(){
var videoAspectRatio = $(this).data('height')/$(this).data('width'),
windowAspectRatio = windowHeight/windowWidth;
if (videoAspectRatio > windowAspectRatio) {
videoWidth = windowWidth;
videoHeight = videoWidth * videoAspectRatio;
$(this).css({'top' : -(videoHeight - windowHeight) / 2 + 'px', 'margin-left' : 0});
} else {
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
}
$(this).width(videoWidth).height(videoHeight);
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
});
}
.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: relative;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container .poster img {
width: 100%;
bottom: 0;
position: absolute;
}
.video-container .title-container {
z-index: 1000;
position: absolute;
top: 35%;
width: 100%;
text-align: center;
color: #fff;
}
.video-container .description .inner {
font-size: 1em;
width: 45%;
margin: 0 auto;
}
.video-container .link {
position: absolute;
bottom: 3em;
width: 100%;
text-align: center;
z-index: 1001;
font-size: 2em;
color: #fff;
}
.video-container .link a {
color: #fff;
}
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
object-fit: cover;
}
.video-container video.fillWidth {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="intro" class="parallax-section">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="homepage-hero-module">
<div class="video-container">
<div class="title-container">
<div class="headline">
<h1>Welcome to our Company</h1>
</div>
<div class="description">
<div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
</div>
</div>
<div class="filter"></div>
<video autoplay class="fillWidth">
<source src="http://video.blendertestbuilds.de/download.blender.org/peach/trailer_480p.mov" type="video/mp4" autoplay loop muted />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" autoplay loop muted />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div class="poster hidden">
<img src="images/background.jpg" alt="">
</div>
</div>
</div>
<div class="container" id="content">
<!-- adding this soon -->
</div>
</section>

Categories