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.
Related
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!
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 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
I have the below image of a blank Macbook.
The image is 1034 × 543.
I want inset a youtube video inside of the "grey" area of the screen. I want it to appear as if the youtube video is playing on the laptop screen.
I also want the laptop image / youtube video to scale, so that when the web page is in a tablet or mobile view, the image and video shrink to match.
I am trying to use fitvid.js to accomplish this but am not having luck -- I can get the video to fit at one static size but I cannot get it to still fit perfectly on resize, it gets deformed.
Below is my current markup:
html:
<div class="col-sm-12">
<div class="title">
<h2>What's New</h2>
<small>ASC Sneak Peak</small>
</div>
<div class="macbook-wrapper">
<iframe width="715" height="402" src="//www.youtube.com/embed/**url**" frameborder="0" allowfullscreen></iframe>
</div>
</div>
SASS:
.macbook-wrapper{
background: url('../img/content/home/macbook.png') no-repeat;
.fluid-width-video-wrapper {
width: 97.5%;
background: #000;
}
}
You could instill some trickery with padding and percentages, that way you could have it scale accordingly. Basically, setting up a container that's purely % base, with an absolutely position iframe that scales accordingly to the container.
HTML
<div>
<iframe></iframe>
</div>
CSS
div {
position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
}
div iframe {
background: url(http://i.stack.imgur.com/zZNgk.png) center center no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You'd just need to add box-sizing: border-box; and some padding to position the iframe within the screen. Check it out http://jsfiddle.net/41sdho4w/
To take it a bit further - here's a version with a container to help control the max-width and max-height rather then relying on the body / viewport http://jsfiddle.net/4g9e3ywy/