I have a video that I have added to my main section of my site, the dimensions are 1920 x 1080, my problem is that the sides are not 100% width if I make the height 100vh.
if I make the height: 100% it goes past the vh of the browser and the responsiveness is to small.
the way they have this video here is what I am trying to accomplish
http://www.welcometofillory.com/
.container video {
height: 100% !important;
width: 100% !important;
overflow: hidden;
}
<div class="container">
<video id="my-video" preload="auto" loop style="width: 1920px; height: 1080px;" width="100%" height="100%">
<source src="landing-video.mp4" type="video/mp4"></source>
</video>
</div>
What's happening to you is correct since the video will always be enlarged proportionally. If you add it to be 100vh (the entire browswer height) then the sides will go off the canvas as the relation is 16:9.
I recommend you to use bootstrap's responsive video:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</div>
Or simply add a wrapper to it that doesn't allow the video to go beyond limits.
.container {
width:100%;
height: 100vh;
overflow: hidden;
}
video{
height: 100vh;
width: auto;
}
Let me know if this helped you, otherwise please add more specifications to your question to understand it better.
Related
I want the video to be responsive on mobile but on desktop its massive. Is there a way to override this so it works on mobile but is to a set pixel on desktop?
<div id="container-fluid"
style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
<iframe id="ViostreamIframe" width="100%" height="100%" src="memories/bobby.mp4" frameborder="0" allowfullscreen="no" style="position:absolute; top:0; left: 0"></iframe>
On modern browsers you can use CSS aspect-ratio to get the 16/9 aspect ratio rather than need to use padding.
You can then set the maximum width that you are prepared for the video to go to.
This snippet sets the max-width at 600px just as a demonstration:
body {
width 100vw;
}
<div id="container-fluid" style="aspect-ratio: 16 / 9; position:relative; display:block; width: 100%; max-width: 600px;">
<iframe id="ViostreamIframe" width="100%" height="100%" src="memories/bobby.mp4" frameborder="0" allowfullscreen="no" style="position:absolute; top:0; left: 0; background-color: gray;"></iframe>
</div>
Note: as there is no actual video in the example the background is set to gray so it can be seen.
So I searched up how to make a video responsive in html with css but it doesn't work. please help
this is my HTML
<div class="container">
<video width="540px" height="320px" controls src="Videos/Video.mp4"></video>
</div>
and this is css
.container {
width: 100%;
}
video {
height: auto !important;
width: 100% !important;
}
I would erase the width and height attributes from the video tag and (if the video isn't larger than specified by those attribute values) introduce a max-width setting in the CSS rule:
<div class="container">
<video controls src="Videos/Video.mp4"></video>
</div>
.container {
width: 100%;
}
video {
height: auto;
width: 100%;
max-width: 540px;
}
This will make the video either 540px wide if the container is >= than 540px, and make it full width when the container is less than 540px wide. Height will be auto according to the proportions in both cases.
In any case, if your video is larger than specified, you should use the original size width as the value for the max-width in the CSS. That way the CSS will allow a size up to original size (but not larger, which would cause bad quality)
I'm making responsive video as background. I want this video to be 100vh in height and automatically cropped in width when the user uses vertical device orientation(phone for example) to preserve aspect ratio. Also i want to remove the white bars which you see in the picture below. How to do this?
video{
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 100vw;
}
#media (pointer:coarse) {
#media (hover: none), (hover:on-demand) {
video {
height:100vh;
}
}
}
<video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay muted loop></video>
I don't know if your background-approach works with videos, but you can do this:
<video id="video">
<source/>
</video>
and
#video{
position: fixed;
right: 0;
bottom:0;
min-width: 100%;
min-height: 100%;
}
This will result in full-screen video that gets cropped when the parent-container has different ratio.
If you want to use it as background, just use another container with fixed-position for the content. You can find a full example here: https://www.w3schools.com/howto/howto_css_fullscreen_video.asp
I would like to remove black bars that appears in vimeo video that has been embedded. I am sharing the link of the code. JSFiddle Link
<div class="embed-container">
<iframe src="https://player.vimeo.com/video/86019637?title=0&byline=0&portrait=0&color=ffffff&autoplay=1" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
iframe{
width:570px;
height:250px;
}
There are 2 black bar left and right. We would like to remove the black bars. Could you please help what could be done to remove it? We are supposed to maintain the aspect ratio. Please go easy on me, I am not a technical guy. Thank you.
Use height and width vh like
.embed-container {
width: 570px;
height: 250px;
}
iframe {
width: 100%;
height: 100vh;
}
videos has an aspect ratio and it will mainten that's why video looks like, when you do it full screen the bars will vanish.
I am struggling with a stupid little thing. Working on this site:
(sorry for the slow server, school stuff you know)
The video you'll see is on height vh100, which is what i want. When I have this video on the max height of your browser the width of the video is not fullscreen.
The code I have now:
HTML
<!-- video -->
<video id="moodvideo" autoplay loop>
<source src="moodvideo.mp4" type='video/mp4'>
</video>
CSS
/* Video */
video {
height: 100vh;
width: 100vw;
}
What I am trying to achieve is the video on full screen, width 100wh and height 100vh. If the height (of the video with width 100wh) is bigger then the height 100vh, I want the video to crop so it will be on fullscreen view on the max width and height your browser. By cropping, I don't bother to missing some of the video (50px from the bottom or so), fullscreen in width and height is more important to me.
Now, I already searched and tried a lot before asking you guys, things like; vw100/vh100, min-height/width 100, add the movie in a div, div to 100 vh/vw, and some scripts I found but nothing really works...
You could use the jquery videoBG plugin: http://syddev.com/jquery.videoBG/
Or you could add the following code: https://jsfiddle.net/wcv2ak9p/1/
The alternative image is displayed when the browser doesn't support the video.
HTML
<video id="moodvideo" autoplay loop>
<source src="moodvideo.mp4" type='video/mp4'>
<img id="alternative" src="alternative.jpg" />
</video>
CSS
#moodvideo, #alternative {
width: 100vw; /* Could also use width: 100%; */
height: 100vh;
object-fit: cover;
position: fixed; /* Change position to absolute if you don't want it to take up the whole page */
left: 0px;
top: 0px;
z-index: -1;
}