.FirstBox {
margin-top: 0;
margin-left: 100px;
margin-bottom: 78px;
height: 60px
}
#BgVideo {
position: absolute;
top: 0;
left: -150px;
top: -650px;
z-index: -100;
}
<div class="FirstBox">
<h1 id="h1">Our secrets</h1>
<div id="BgVideo">
<video playsinline autoplay muted loop width="1640px" height="2060px" src="https://www.w3schools.com/tags/movie.mp4"></video>
</div>
</div>
i tried overflow: hidden; in firstbox class and bgvideo too but didnt work.
i wanna video just be in first box.
video height is 964px.
.FirstBox {
height: 160px;
overflow: hidden;
max-width: 100%;
/* make absolute positioning relative to this div */
position: relative;
}
#BgVideo {
/* calculating height based on the 100% of viewport width and the aspect ratio. */
width: 100vw;
height: calc(9 / 16 * 100vw);
/* center video using absolute positioning */
position: absolute;
top: 0;
left: 0;
/* place the video tag under everything inside .FirstBox div */
z-index: -1;
}
<div class="FirstBox">
<h1>Our secrets</h1>
<video id="BgVideo" autoplay muted> <!-- use the video tag properly with a source tag -->
<source src="https://www.w3schools.com/tags/movie.mp4">
</video>
</div>
Related
I am not able to fit the background video fit the screen for all devices and browsers. Somehow I am success full in doing it on chrome browser. Earlier it was clipping on both the sides of chrome browser. Now I realize that it is fine on chrome but the problem persists on IE edge
I Have already written the code just need a validation from experts or any improvement on it
here is the code pen https://codepen.io/jslearner1/pen/ydrzZz?editors=1100
*{
margin:0;
padding:0;
}
body{
font-size: 62.5%;
box-sizing: border-box;
font-family: 'Lato',sans-serif;
letter-spacing: 0.5px;
line-height: 1.7;
background-color: #fcfcfc;
}
.header{
width: 100%;
height: 100vh;
font-size: 2rem;
color: #fcfcfc;
position: relative;
z-index: 99;
overflow: hidden;
.overlay{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(#000000,0.8);
z-index: 1;
&__text{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
}
.bg_video{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100vh;
object-fit: cover;
}
<body>
<header class="header">
<div class="overlay">
<div class="overlay__text">
<p>Welcome !!!</p>
</div>
</div>
<!-- Video Taken from George Park Code pen -->
<video autoplay muted loop class="bg_video">
<source src="http://www.georgewpark.com/video/blurred-street.mp4" type="video/mp4">
<source src="http://www.georgewpark.com/video/blurred-street.mp4" type="video/webm">
your browser is not supported
</video>
</header>
</body>
Similar to this issue: IE and Edge fix for object-fit: cover;
Basically object-fit doesn't really work in Edge (despite being supported).
Replace your .bg_video css with this:
.bg_video{
position: absolute;
top:50%;
left:50%;
width: 100%;
height:auto;
transform: translate(-50%, -50%);
}
You can use the object-fit proprety :
.bg_video {
object-fit : cover;
}
How would I embed a responsive playable youtube video into this tv? (Preferably not on autoplay).
I'm having a hard time with this and was wondering if anyone can help. Thank you.
.tv {
position: absolute;
left: calc(50% - 550px/2);
top: calc(50% - 380px/2);
}
.tv img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 550px;
}
.video {
position: absolute;
top: 25px;
left: 20px;
}
.b {
width: 400px;
height: 300px;
background: black;
}
<div class="tv">
<img src="http://honeypotmarketing.com/wp-content/uploads/OLD-SCHOOL-TV.png" alt="" />
<!-- broken video -->
<div class="video">
<video class="b" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" autoplay></video>
</div>
</div>
For responsiveness you need to add css for div heigh:auto and width in % not pixels, like:
style="max-width:100%;height:auto;"
Hope it works.
Thanks :)
I have the following markup:
.jumbotron {
position: relative;
z-index: -101;
overflow: hidden;
height: 500px;
background: red;
}
.jumbotron video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
z-index: -100;
}
.video-content {
text-align: center;
color: #fff;
}
<div class='jumbotron'>
<video autoplay loop class="fillWidth">
<source src="https://ia800201.us.archive.org/12/items/BigBuckBunny_328/BigBuckBunny_512kb.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogv" />
<source src="video.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div class='video-content'>
<h1>Welcome to the Site</h1>
<p>This is just a test but it shows a background video</p>
</div>
</div>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-12'>
<h2>Section Heading</h2>
</div>
</div>
</div>
My question is around the responsiveness of the video background. When I make the viewport smaller the video eventually begins to shrink and the parent div remains longer then it - resulting in an unwanted red background.
How can I ensure the parent div scales with the size of the video? So that when I bring it right down to > 480px the h2 tag will be right below the video.
You can see a a fiddle here
This will work for you :)
.jumbotron {
position: relative;
height: 500px;
overflow: hidden;
}
.jumbotron video {
position: absolute;
bottom: 50%;
right: 50%;
-webkit-transform: translateX(50%) translateY(50%);
transform: translateX(50%) translateY(50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
you can change the fixed height to padding-bottom in .jumbotron
.jumbotron {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
height: 0;
background: red;
}
.jumbotron video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%
}
.video-content {
text-align: center;
color: #fff;
}
<div class='jumbotron'>
<video autoplay loop class="fillWidth">
<source src="https://ia800201.us.archive.org/12/items/BigBuckBunny_328/BigBuckBunny_512kb.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogv" />
<source src="video.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div class='video-content'>
<h1>Welcome to the Site</h1>
<p>This is just a test but it shows a background video</p>
</div>
</div>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-12'>
<h2>Section Heading</h2>
</div>
</div>
</div>
Not sure if I understood. I made the video fill the screen, by changing its height and width to the viewport size. But needs to keep the aspect ratio.
.jumbotron video {
...
height: 100vh;
width: 100vw;
...
}
Researched elsewhere, can't find a solution to horizontally center a video in a Bootstrap div / header section while keeping the video vertically aligned with the top. Div / header section is 100% width with two fixed heights at certain viewport breakpoints.
I've tried removing/renaming the <header> tag in case Bootstrap's styles interfere. Tried <center> tags, specifying the video tag as display:inline and many many other attempts.
The video in this example centers at certain breakpoints but otherwise is left-aligned. I'd like it to be centered throughout all viewport widths, and top aligned as well.
Thanks very much!
HTML:
<header>
<video loop muted autoplay poster="images/3671960.jpg" class="fullscreen-video">
<source src="video/3671960.mp4" type="video/mp4">
</video>
<div class="header-content">
<div class="header-content-inner">
<h1>A bunch of header text.</h1>
</div>
</div>
<div class="launcher">
<div class="launcher-inner">
Button text
</div>
</div>
CSS :
header {
position: relative;
text-align: center;
top: 0;
left: 0;
width:100%;
height: 475px;
color: #fff;
overflow: hidden;
margin: 0 auto;
}
header .fullscreen-video {
position: absolute;
top: 0;
left: 0;
min-width:100%;
min-height:100%;
z-index: -100;
}
#media (min-width: 768px) {
header {
height: 665px;
}
}
HTML
<header>
<video loop muted autoplay poster="images/3671960.jpg" class="fullscreen-video">
<source src="video/3671960.mp4" type="video/mp4">
</video>
<div class="header-content">
<div class="header-content-inner">
<h1>A bunch of header text.</h1>
</div>
</div>
<div class="launcher">
<div class="launcher-inner">
Button text
</div>
</div>
</header>
CSS
header {
position: relative;
text-align: center;
top: 0;
left: 0;
width:100%;
height: 475px;
color: #fff;
overflow: hidden;
margin: 0 auto;
}
header .fullscreen-video {
position: absolute;
left: 50%;
top: 0;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
min-width:100%;
min-height:100%;
z-index: -100;
}
#media (min-width: 768px) {
header {
height: 665px;
}
}
Demo Link : https://jsfiddle.net/hellosrini/vwc5hek0/
I need to overlay a div ON TOP of a div containing an HTML 5 video. In the example below the overlaying div's id is "video_overlays". See example below:
<div id="video_box">
<div id="video_overlays"></div>
<div>
<video id="player" src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" onclick="this.play();">Your browser does not support this streaming content.</video>
</div>
</div>
Here is a stripped down example, using as little HTML markup as possible.
The Basics
The overlay is provided by the :before pseudo element on the .content container.
No z-index is required, :before is naturally layered over the video element.
The .content container is position: relative so that the position: absolute overlay is positioned in relation to it.
The overlay is stretched to cover the entire .content div width with left / right / bottom and left set to 0.
The width of the video is controlled by the width of its container with width: 100%
The Demo
.content {
position: relative;
width: 500px;
margin: 0 auto;
padding: 20px;
}
.content video {
width: 100%;
display: block;
}
.content:before {
content: '';
position: absolute;
background: rgba(0, 0, 0, 0.5);
border-radius: 5px;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div class="content">
<video id="player" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/1/18/Big_Buck_Bunny_Trailer_1080p.ogv/Big_Buck_Bunny_Trailer_1080p.ogv.360p.vp9.webm" autoplay loop muted></video>
</div>
Here's an example that will center the content within the parent div. This also makes sure the overlay starts at the edge of the video, even when centered.
<div class="outer-container">
<div class="inner-container">
<div class="video-overlay">Bug Buck Bunny - Trailer</div>
<video id="player" src="https://wiki.yoctoproject.org/wiki/images/a/a6/Big-buck-bunny_trailer.webm" controls autoplay loop></video>
</div>
</div>
with css as
.outer-container {
border: 1px dotted black;
width: 100%;
height: 100%;
text-align: center;
}
.inner-container {
border: 1px solid black;
display: inline-block;
position: relative;
}
.video-overlay {
position: absolute;
left: 0px;
top: 0px;
margin: 10px;
padding: 5px 5px;
font-size: 20px;
font-family: Helvetica;
color: #FFF;
background-color: rgba(50, 50, 50, 0.3);
}
video {
width: 100%;
height: 100%;
}
here's the jsfiddle https://jsfiddle.net/dyrepk2x/2/
Hope that helps :)
There you go , i hope this helps
http://jsfiddle.net/kNMnr/
here is the CSS also
#video_box{
float:left;
}
#video_overlays {
position:absolute;
float:left;
width:640px;
min-height:370px;
background-color:#000;
z-index:300000;
}
<div id="video_box">
<div id="video_overlays"></div>
<div>
<video id="player" src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" onclick="this.play();">Your browser does not support this streaming content.</video>
</div>
</div>
for this you need to just add css like this:
#video_overlays {
position: absolute;
background-color: rgba(0, 0, 0, 0.46);
z-index: 2;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#video_box{position: relative;}