Am trying to build a simple html video player with a 16/9 aspect ratio
<div class="video-container">
<video controls class="video">
<source src="/text.mp4" type="video/mp4" />
</video>
</div>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
but so far it does not work, the video's height is always more than the viewport and hence vertical scroll bars.
You are on the right path but I think you are wondering why the video takes up the full screen/viewport. In your example you didn't give the .video-container a parent div and specify a size:
.parent {
width: 500px;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
<div class="parent">
<div class="video-container">
<video controls class="video">
<source src="/text.mp4" type="video/mp4" />
</video>
</div>
</div>
Related
Set a maximum size to the video size ratio
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
max-width: 1024px;
max-height: 576px;
}
.videoWrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 1024px;
max-height: 576px;
}
And HTML code
<div class="videoWrapper">
<video class="aspect-ratio-box" autoplay>
<source src="../../../assets/original.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
Here the result : https://prnt.sc/s6y3no
The width size is correctly limited to 1024px. The problem is that the height is not limited. It does not allow to put the paragraph below the video.
Why is he ignoring my css rules? How can I overcome this problem
Thanks for helping
I found the solution.
.video {
object-fit: cover;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.video-frame {
position: relative;
padding-bottom: 56.25%;
display: block;
overflow: hidden;
}
.video-container {
max-width: 1024px;
}
And HTML
<div class="video-container">
<div class="video-frame">
<video class="video" autoplay>
<source src="../../../assets/original.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
HTML:
<div class="video">
<iframe src="https://www.youtube.com/embed/bRhZUF47p2E?version=3&rel=0&controls=0&showinfo=0&autoplay=1&mute=1&loop=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
CSS:
.video {
width: 100%;
height: 200px;
border: 1px solid red;
overflow: hidden;
position: relative;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
JSFIDDLE: http://jsfiddle.net/pj2utq4v/
QUESTION: How to force iframe to be 100% of parent div width. Since parent div is only 200px in height, iframe video would be cropped which is also okay with me.
You can do this changing your CSS classes a little bit:
.video {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
JSFIDDLE: http://jsfiddle.net/pj2utq4v/1
Added one more div with overflow hidden and fixed height and it works.
<div style="height: 200px; overflow: hidden">
<div class="video">
<iframe src="https://www.youtube.com/embed/bRhZUF47p2E?version=3&rel=0&controls=0&showinfo=0&autoplay=1&mute=1&loop=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<style>
.video {
width: 100%;
height: 200px;
border: 1px solid red;
overflow: hidden;
position: relative;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
http://jsfiddle.net/pj2utq4v/
Is there a reason you want to use iframes? I would try using HTML5 video tag. Here's an example: https://www.w3schools.com/html/html5_video.asp then set your video width to 100% like this:
<video width="100%" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
I have .mp4 as background of my site. The video is containing some non-moving elements. Let's say a square.
I want to place a div over this square and let it scale with the video if the window resizes.
I am testing, but the main problem is that the aspect ratio of the div is changing when resizing the window.
jsfiddle with example video:
https://jsfiddle.net/xhrub7so/6/
HTML
<div class="wrapper">
<div class="fullscreen-bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</div>
<div class="url_1">
test
</div>
</div>
CSS
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.url_1
{
position: absolute;
margin-top:20%;
margin-left:20%;
width: 50%;
height:30%;
background-color: #cccccc;
display:block;
}
.wrapper{
width:100%;
height:100%;
}
Thanks for the help.
I am trying to attach a video as a background to an article section. The issue is that in small screens it is displayed only in the 1/3 of the article. To implement that I used the article class, a background div as a wrapper and the video element id. Any ideas?
<article class=”myArticle”>
<div class="fullscreen-bag">
<video id="videoBack">
<source src=" " type="video/mp4">
<source src=" " type="video/ogg">
<source src=" " type="video/webm">
</video>
</div>
<div class="container">
//
//
</div>
</article>
//Css
.myArticle {
position: relative;
overflow: hidden;
}
.fullscreen-bag {
overflow: hidden;
position: absolute;
height: auto;
width: auto;
z-index: -100;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
#VideoBack {
position: absolute;
z-index: -100;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
i found the solution. I deleted the #VideoBack rules, and i applied the .fullscreen-bag inside the video tag.
Hello I have a div with a <video> tag in it, and this is set as the background of the div. I have it working but when I go on to create a div below that, the video extends into that div. Basically the video extends beyond its parent container into other divs. It looks like it is taking the full height of the site instead of the full height of the div.
Here is my code:
.banner {
height: 903px;
width: 100%;
}
.banner video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: url() no-repeat;
background-size: cover;
}
<div class="banner">
<video autoplay="" loop="">
<source src="//myvid.mp4" type="video/mp4">
<source src="//myvid.ogg" type="video/ogg">
</video>
</div>
Does anyone know why it is doing this?
Thanks!
change position:fixed to absolute and let the parent container be position:relative
check this snippet
.banner {
height: 200px;
width: 100%;
border: 1px solid green;
position: relative;
}
.banner video {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background: url() no-repeat;
background-size: cover;
}
<div class="banner">
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<div>
whkjshfdksjhdfksdf
</div>
Hope it helps
You have position: fixed change that to absolute. Since fixed takes the current Display scope seperated from the parent elements. Thus scrolls and takes up everything since you used widht: 100%; height: 100%;
You might also add position: relative; to the banner class so the video has it as a parent.
In addition to changes to defaults, there are changes to position of .banner (relative) and the video (absolute), and the height of the video has been modified to a percentage that maintains a 16:9 aspect ratio. To demonstrate that it covers only it's container(.banner), .banner is set at half the lengths of viewport. Please review the Snippet in Full page mode.
SNIPPET
html,
body {
width: 100%;
height: 100%;
font: 400 16px/1.428 Verdana;
color: #eee;
overflow-x: hidden;
overflow-y: auto;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
outline: none;
}
.banner {
position: relative;
height: 28vh;
width: 50vw;
}
.banner video {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
min-width: 100%;
min-height: 56.25%;
width: auto;
height: auto;
z-index: 0;
/*background: url() no-repeat;*/
background-size: cover;
}
<div class="banner">
<video id="vid1" class="vid" src="http://html5demos.com/assets/dizzy.mp4" controls>
</video>
</div>