Trying To Create A Video Landing Page Using CSS - javascript

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%);
}

Related

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>

How would I align css height to size of browser window?

Ok, so I want to place a video so that it's height is 100% of the browser window, but not the video, so instead of the video height being 1080px (with scrollbars) but the height relative to how tall the browser window is.
Here is my current styling (it works):
video {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100%;
}
I'd like it to look like this:
--Meaning no padding and no scrollbar. I've tried the viewport height css property, but that causes a scrollbar. The code aforementioned does yield the results I am looking for, but it is an extremely inefficient way to do such a simple thing, and I do not know if it will display the same way in other browsers. Here it is live...
Is there a JavaScript alternative? Or better yet pure-css?
Percentage heights of elements in the normal flow of the document only work when an ancestor element has had its height definitively set.
But, to skip all of that, set it to 100% of the viewport height:
height:100vh;
Reset the Body and HTML Tag then you can use 100% and get true 100% height and width.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#fullscreen-video{
width:100%;
height:100%;
background-color:green;
overflow:hidden;
}
<div id="fullscreen-video">
<iframe id="video" width="100%" height="100%" src="https://www.youtube.com/embed/A3PDXmYoF5U" frameborder="0" allowfullscreen></iframe>
</div>
Alohci explained that I should use vertical-align: top; to remove the scrollbar, with help from him and other answers from Scott Marcus and Timothy. All received answers were helpful and contributed to the final answer seen here.
So, my previous css:
body {
background-color: #000000;
}
video {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100%;
}
And my new css:
body {
background-color: #000000;
margin: 0;
text-align: center;
}
video {
vertical-align: middle;
height: 100vh;
}

CSS positioning/resizing html5 video background

Hey all you wizards of the interwebs,
I've been pulling my hair out for the past couple of days trying to figure this one out.
I'm trying to include a fullscreen video background and it seems I have hit a snag.
Below is an image of what I am trying to accomplish.
I tried it with the video element as well as an iframe. I can't get the div below to always nest under, when the browser window is resized.
Any help or pointers are greatly appreciated. Closest I've gotten was with a min-width/height but it still leaves a gap...
What I end up with is what shws in the 2nd img. The video resizes with the browser and there's a gap below it
To prevent the problem you need to do this:
css:
.div1{ background-color: red; height: 100%; position: relative; overflow: hidden;}
.div2{ background-color: black; height: 100%;}
video{ position: absolute; height: 100%; width: 100%; margin: 0; padding: 0; top: 0; bottom:0; right: 0; left: 0;}
and put your video inside div1:
<div class="div1">
<video autoplay>...</video>
</div>
<div class="div2">
</div>
It don't allow video element to show at overflow. and div1 is always height:100% and div2 is always height:100%.
If you like to fit the video to the div1 add
object-fit: cover;
to the video tag.
IE Doesn't Support object-fit
I'm not sure if this will work but
Have you tried removing width: 100% and only keeping height: 100% ?
I might be able to give better suggestions, if you can show the code :p
EDIT:
Since you want height to be screen height and width can be more or less, I'd say, try
min-height: 100%;
width: auto;
height: auto;
This should do the trick
NEW EDIT:
body{
overflow:hidden;
}
#wrapper {
width: 100%;
height: 100%;
}
.videoInsert {
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
position: absolute;
left: 0%;
top: 0%;
}
video{
display: inline-block;
vertical-align: baseline;
object-fit: fill;
}

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