Video as background on a website playing on command - javascript

I've been trying to set a video as background, I have the flv-file and youtube-link. Putting it on my website isn't that difficult with html5 video-tag or jquery but I can't find how I can put it on my website but not auto starting. I have a semi-transparent rectangle where the text will come over. So my idea was creating a button or link to let the text and rectangle dissappear and letting the video play.
Does anyone knows a good plugin or script to do this or can someone bump into the right direction.
greetz

You can do this with native browser html5 video player too which will be much faster, no need to use a plugin. Try this:
Here is working jsFiddle example.
jQuery:
$(document).ready(function() {
var windowH = $(window).height();
$('#main_container, #overlay').height(windowH);
$(window).resize(function () {
var windowH = $(window).height();
$('#main_container, #overlay').height(windowH);
});
});​
css:
body { background-color: #000000; font-family: Arial; font-size: 12px;
color: #000; margin: 0; padding: 0; overflow: hidden; }
#main_container { float: left; position: relative; width: 100%; height: 100%;
background-color: #000000; }
#video { position: absolute; left: 0px; top: 0px; min-height: 100%;
min-width: 100%; z-index: 9997; }​
#overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;
z-index: 9998; }
html:
<div id="main_container">
<div id="overlay"></div>
<video id="video" width="" height="" controls="controls" loop="loop" autoplay="">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</div>
Note: Used overlay div for deactivating controls and you can use whatever content on your video, like in jsFiddle example.

If you want a script, you can try: https://github.com/sydlawrence/jquery.videoBG
In the documentation here: http://syddev.com/jquery.videoBG/index.html#documentation, there seems to be an auto play option with a Boolean parameter...so I'm guessing just set it to false
autoplay
bool

Related

Horizontally scrollable gallery of videos that play on hover

I'm trying to create a gallery of images that, when hovered upon, the image disappears and a video begins playing, similar to Netflix. I was able to create a gallery that did what I want here:
.container {
display: flex;
overflow-x: auto;
width: 600px;
margin-left: 300px;
}
.container img {
margin-right: 15px;
width: 150px
}
<div class="container">
<img src=https://image.shutterstock.com/image-vector/check-back-soon-hand-lettering-600w-1379832464.jpg>
and the image disappearing and video playing on hover that I want here:
const videos = document.querySelectorAll(".polystar");
for (const video of videos) {
video.addEventListener('mouseover', function() {
video.play()
}, false);
video.addEventListener('mouseout', function() {
video.pause()
}, false);
}
.gallery-cv {
display: flex;
z-index: 1;
overflow-x: auto;
width: 1200px;
margin: 0;
}
.polystar {
width: 300px;
z-index: 2;
opacity: 0;
}
.top-img {
position: absolute;
width: 300px;
height: 535px;
z-index: 1;
}
.polystar:hover {
opacity: 1;
}
.second {
margin-left: 150px;
position: absolute;
z-index: 3;
}
<h1> headline </h1>
<div class="gallery-cv">
<img class="top-img first" src="https://source.unsplash.com/random">
<video class='polystar' muted src="https://player.vimeo.com/external/432406907.hd.mp4?s=f35b5f202d573efa75d9293d213fc3be0927fd85&profile_id=172&oauth2_token_id=57447761" type="video/mp4">
<img class="top-img second" src="https://source.unsplash.com/random">
<img class="top-img third" src="https://source.unsplash.com/random">
</div>
But when I try to combine these (as I've attempted in the above codepen), my gallery disappears and I'm left with only one image, despite having others present in the html. I'm guessing this has something to do with me losing my gallery when I try to have the images inside it absolutely positioned, but I'm not sure how else to achieve my hover effect without absolutely positioning them.
There are multiple problems we have to solve. Lets start with the image that should be displayed by default and disappear for the video on hover:
We need a wrapping element that contains the video and the image like a <div>.
We apply position: relative; to the parent element (wrapper)
We apply position: absolute; inset: 0; (inset: 0 = top + right + bottom + left: 0;) to have the image span the entire wrapping element and elevate it layer-wise above the video with a positive z-index: z-index: 1;
to hide the image on hover we use: div:hover img { display: none; }
The next issue is to start playing the video on hover. For that we need JS which we also can do with the onmouseover-attribute: onmouseover="element.play();"
To pause the video when you not hovering we can use JS or the onmouseout-attribute: onmouseout="element.pause();"
Both the onmouseover and onmouseout trigger/attribute must be added to the wrapping parent element.
div {
position: relative;
}
video {
width: 100%;
}
img {
width: 100%;
object-fit: cover;
position: absolute;
inset: 0;
z-index: 1;
}
div:hover img {
display: none;
}
<div onmouseover="document.querySelector('video').play();" onmouseout="document.querySelector('video').pause();">
<video>
<source src="https://www.tacoshy.de/stackoverflow/testvideo.mp4" type="video/mp4">
</video>
<img src="https://via.placeholder.com/1920x1080.jpg">
</div>

Removing iframe white space around videos?

How can I get rid of this extra white space that iframes create? I am using a reference to a web app but, as far as I know, it should stretch to any 16:9 aspect ratio window. This isn't happening though. It seems this happens with other videos too, but the sides are often transparent. Is there a way I can do that here? Thanks
HTML:
<body background="images/Background.png">
<iframe id="primaryVideo" src="http://54.202.201.116/app/5/">
<p> Your browser does not support iframes. </p>
</iframe>
<button id="restart" left="1%">Start Over</button>
</body>
CSS:
#videoWrapper{
height: 100%;
}
#primaryVideo{
width: 80%;
height: 80%;
border: none;
position: absolute;
float: left;
display: inline;
}
div{
text-align:center;
}
I dug into the layout of that address and found the real location of the video. I applied the styles suggested from this old but still relevant article. It's 100% responsive. If you don't want it as big as the viewport, adjust the width of div.frame accordingly.
Demo 1 is the actual video in an iframe, Demo 2 is the site the has the video within the iframe. The player in Demo 2 looks like videoJS plugin so if you play the video through that, then the dimensions are up to the site which is still responsive. You can't see it functioning on SO because the site in question does not support https. Check it out at this Plunk.
Demo 1
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.frame {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
<div class='frame'>
<iframe src='https://s3-us-west-2.amazonaws.com/static.tapmedialabs/tap_media_intro_video_v8.mp4' width='100%' height='100%' allowfullscreen frameborder='0' scrolling='no'></iframe>
</div>
Demo 2 see Plunk for a functioning demo
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.frame {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
<div class='frame'>
<iframe src='https://54.202.201.116/app/5/' width='100%' height='100%' allowfullscreen frameborder='0' scrolling='no'></iframe>
</div>

Trying To Create A Video Landing Page Using CSS

I am trying to replicate the Landing Page used on X Theme's Integrity 1, but I run into difficulty figuring out a way to keep the video full screen and focused at the center without making it the entire background. I have tried:
<style type="text/css">
body {margin: 0; padding: 0; background-color: green;}
#landing {margin: 0; padding: 0; top:0; left: 0; height: 100%; width: 100%; position: absolute}
video {top:0; left:0; min-width: 100%; min-height: 100%; width: 100%; height: auto; background-size: cover; bottom: 0;}
</style>
<body>
<div id="landing">
<video id="sey" src="seydrone.mp4#t=57,286" preload="auto" autoplay="true" muted="muted" loop="loop" type="video/mp4"></video>
<span id="welcome">DISCOVER NATURE'S SECRETS</span>
</div>
</body>
When the browser is in full-screen, it works perfect, but upon shrinking the page the landing video does not respond as per the X Theme demo does. I intend to place my nav-bar as per the demo and scroll down just the same which is why the background option is not possible.
Any help/suggestions would be thoroughly appreciated.
They have used some JavaScript for that, but there is a way to do it without JS.
Change your video styles to this:
video {
// Force video to cover screen
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
// Center video
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

Creating a section with video as background HTML5

I'm trying to imitate the front page of lumosity.com but I am unable to set a video background to the section. Here's what I've done so far:
HTML
<section id="banner">
<video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="https://static.lumosity.com/resources/home_page_templates/574/neuralnetwork.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Sorry, your browser does not support HTML5 video.
</video>
<p>This is text that is in front of video, we do not want the z-index of video to be greater than content. Hence background!
</p>
</section>
CSS
#videobcg {
position: absolute;
top: 0px;
left: 0px;
padding: 5em 2em 4em 2em;
z-index: -1000;
overflow: hidden;
}
As you can see my code doesn't work, the video remains hidden somewhere on the webpage. Any ideas?
I used this as an example and modified your css.
Example 1: Video as background of containing div
In this example the video only plays as the background of the containing div, similar to lumosity.com:
JSFIDDLE 1
#banner {
position: relative;
height:300px;
width:100%;
overflow: hidden;
}
#videobcg {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
height:auto;
width:auto;
z-index: -100;
}
Example 2: Video as background of full page
JSFIDDLE 2
#videobcg {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background-size: cover;
transition: 1s opacity;
}
I use BIGVIDEO.JS to do the Video Background :
HTML
<div class="background-image-hide parallax-background video-wrap" data-video-wrap="images/slides/video.mp4" data-img-wrap="images/slides/video.jpg">
</div>
JS
var bigVedio = function() {
// initialize BigVideo
var BV = new $.BigVideo({
container: $('.video-wrap'),
forceAutoplay: isTouch
}),
V = $('.video-wrap').attr('data-video-wrap'),
img = $('.video-wrap').attr('data-img-wrap');
if (typeof V != typeof undefined) {
if (!isTouch) {
BV.init();
BV.show(V, {
ambient: true,
doLoop: true
});
} else {
BV.init();
BV.show(img);
}
}
};
css
.background-image-hide {
position: absolute;
top: -30px;
height: 150%;
width: 100%;
background-size: cover !important;
z-index: 0;
background-position: 50% 50%;
}
Hope this will help you.

HTML5 video tag - how to set cover background size

I am trying the video tag of HTML5 and want to give background size cover property to it. It is not taking that property. I had given width: 100% and height: 100%, also the video go outside container.
How I can achieve it ?
CSS:
video#videoId{
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;
}
Fix para IE:
<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->
video { display: block; }
I suggest you to put your video tag inside a div wrapper.
Rather than seeing video deformed, I prefer show black background.
DEMO.
In this way, video will adapt itself to the parent div size.
HTML
<div id="main">
<video id="bunny" controls>
<source src="../video/video.mp4>
</video>
</div>
CSS
#main {
height: 300px;
width: 300px;
background-color: black;
}
#bunny {
width: 100%;
height: 100%;
}
I needed to center the video and use it as a background, so I've cleaned and enhanced the answer Jagu provided. It now optionally centers the video, and has an optional color overlay.
Live Demo: https://jsfiddle.net/prrstn/vn9L2h1w/
HTML
<div>
<!-- Optional attributes, remove the features you don't want.
Add the "controls" attribute to get the video player buttons -->
<video autoplay loop muted>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
</video>
</div>
CSS
div {
/* This keeps the video inside the div */
position: relative;
/* These are optional based on the size of
the area you want the video to cover */
width: 100%;
height: 500px;
/* Color overlay on video, optional */
background-color: rgba(0, 0, 0, 0.5);
}
video {
position: absolute;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
/* This puts the video BEHIND the div, optional */
z-index: -1;
/* These two properties center the video, optional */
left: 50%;
transform: translateX(-50%);
}

Categories