I have a standard Video.js player with the fluid property set to true like the following.
<link href="https://vjs.zencdn.net/6.9.0/video-js.css" rel="stylesheet">
<div class="video">
<video id="my-video" class="video-js" data-setup='{"fluid": true}' controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
</video>
</div>
<script src="https://vjs.zencdn.net/6.9.0/video.js"></script>
I also have the following CSS.
.video {
width: 500px;
height: 100px;
}
Now technically in the actual site those width and height properties are more dynamic. Depending on page size and all that. So it's not like I'll know what the width and height will be.
Currently what happens in both the example I made to reproduce it, and my site is that the fluid only maps to the width, and doesn't take into account the height of the container.
What I'm looking to do is make the video fluid (no black bars around video) and contain it within the width and height of the parent div. If the video needs to be smaller than the container div in terms of width (due to fluidness) it should center within the div.
I have posted a CodePen below as an example of the code above.
https://codepen.io/anon/pen/YvxbJB
Any ideas how I can achieve this?
One thing you can try is to set your container div to a relative position, center that div, and then set padding to get the aspect ratio you want (if any). Then absolutely position your video tag with a height and width of 100%.
.video {
position: relative;
/* padding-bottom: 56.25%; uncomment to get an aspect ratio of 16:9 */
padding-top: 25px;
height: 0;
margin: 0 auto;
}
#my-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Hope that helps!
Related
I've got a video that I'm using as a background above the fold on a page, spanning 100% width. I want the video to be situated at almost the center point of the page. I figured the best option was to have the height set to something along the lines of using vh. However, I noticed that when I get to larger screens, since the video itself re-sizes to the larger width, it makes the video height larger as well, resulting in the whole bottom being cut off.
This is what I have:
.container {
position: relative;
margin-top: 20vh;
}
.video {
opacity: .2;
width: 100vw;
vertical-align: middle;
height: auto;
}
Is there a way to figure out how what the height of the video is, which then I could use to figure out how much padding I can add at the top as blank space? Or is there an even easier method that I'm over-looking?
Thanks!
Edit to add HTML
Here's the HTML for comparison:
<div class="container">
<video autoplay muted loop class="video">
<source src="./media/MockUpVid.mp4" type="video/mp4"/>
</video>
</div>
.container {
position: relative;
margin-top: calc((100vh - 56vw)/2);
}
.video {
opacity: .2;
width: auto;
vertical-align: middle;
min-height: 60vh;
}
Using the aspect ratio we were able to achieve the desired layout.
Quick question since I can't find it here.
I have a video and I have attached it with the following code on html
video {
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
<section class="banner">
<div class="banner-header">
<video poster="#" autoplay="true" loop>
<source src="coding.mp4" type="video/mp4" />
</video>
</div>
</section>
When I try it out, my video shows, it plays and loops. Perfect. Except the size is so massive that I can scroll to the right and I no longer see the body just the background and the far right side of the video.
I want the video to be smaller and to align properly with the whole responsive website. And below the video is pretty much the body of the website, which are my skills and contact details. So the video serves as a "header" even though I have a proper header with navigation buttons and what not.
In your CSS, remove
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
then specify a numerical value for width, for example 50% or 400px.
The browser will proportionally scale the video, so you don't need to set the height.
Solved.
On my CSS I had the following code
.banner {
width: 150%;
background-color: #6991AC;
}
changed it from 150% to 100%, with the CSS code for video from the question I changed it to only contain width and height, with width set to 100% and height to auto.
I'd like to make the size of the video relative to the screen size. However, if I set the height as fixed, on some screen sizes it does not work. Any way I can get the video to fit the screen, but not be out of proportion?
The full code is here: https://github.com/GiacomoLaw/british-airways-virtual/blob/master/index.html
Thank you!
Wrap the video in another element which has an intrinsic aspect ratio, then absolute position the video within that. That gives us fluid width with a reasonable height we can count on.
<div class="videoWrapper">
<iframe src='https://www.liveflightapp.com/embed?key=b1371aa1-dea8-41cd-af74-8fda634b3a5d' width='100%;' height='500px;' frameborder='0' scrolling='no'></iframe>
</div>
And then apply the following style properties..
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
May be that helps..
I have the following style:
video {
position: absolute;
transform: rotate(90deg);
width: 100%;
height: 100%;
z-index: 4;
visibility: visible;
}
This is the video element:
<video id="myVideo" src="/Space4.mp4" autoplay loop></video>
This seems to rotate and center the video, but it is almost 1/4 of the screen size. How can make it fit to screen?
This is a case where the new CSS3 units come in handy. If you just use normal percentages to specify the width and height of the <video> element, they will default to associating these dimensions with their viewport counterparts - but only prior to the rotation. So after rotation, these values will no longer correspond correctly to the viewport dimensions.
Since you actually want the opposite in this case, you can use height: 100vw and width: 100vh to explicitly specify that you want height measured in terms of viewport width, and width in terms of viewport height.
With the correct sizing, you'll also need to change the point around which the video is rotated. Otherwise, it becomes difficult to align the edges of the video with the edges of the viewport, as shown in this expertly crafted visual example:
Following this adjustment, the last step is just to move the video upwards by a certain amount, in order to make it flush against the top of the viewport. How much is that amount? Well, the height of the video - which we specified as 100vw. (I used a negative margin-top for this.)
Implementing these changes (and setting object-fit: cover so no whitespace is visible), we end up with:
html,
body {
margin: 0; /* Because annoying default browser margins */
}
video {
position: absolute;
transform: rotate(90deg);
transform-origin: bottom left;
width: 100vh;
height: 100vw;
margin-top: -100vw;
object-fit: cover;
z-index: 4;
visibility: visible;
}
<video id="myVideo" src="http://html5demos.com/assets/dizzy.mp4" autoplay loop></video>
Hope this helps! Let me know if you have any questions.
I am having a client's Html Site Project, Where I used a video in the background of site's homepage, I used a absolute div outside of video with 100% height and width, My Client don't want a scrollbar on y-axis & I also cant use overflow:hidden; property of CSS, may be Client will adds some content in future, I am still confused if i have given 100% height and width to parent element of video then from where the scrollbar is coming when I use bottom:0 poperty with that div then scrollbar won't show but the size of video would be changed, why its happening please help me. Thanks in advance & and forgive me if I could not clear the exact problem which I am getting.
Site URL: http://trekoholic.com/site/
I used body { overflow-y: hidden; } as a temporary basis
CSS and HTML:
div#video-player {
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
<div id="video-player">
<video width="100%" height="100%" loop="" autoplay="">
<source type="video/webm" src="Video/eat.webm"></source>
</video>
</div>
you have to change
div#video-player {
position: absolute;
}
by
div#video-player {
position: fixed;
}
it works but has a counter, if the video has the largest height to the height of the bottom of the screen will not see, but if I understood correctly, this is desired, even in the future will allow you to add more content and will be seen without problems
if you want the full video display just add height: 100% to div#video-player
div#video-player {
position: fixed;
height: 100%;
}
the counter, if the video has different proportions than the screen may not fill the entire width
so I really hope this helps