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
Related
I'm trying to create a site with a looping video for a background that has an image with a transparent background overlayed over the video. I am able to create the video background and overlay an image but when I do so, the transparent parts of the image become filled in with white. This makes my image appear as if it is in a white box when I just want the non-transparent content to be visible. Is there a way to prevent this?
To provide some additional information, the image and video share the same parent div with the image coming before the video. The video is an mp4 file and the image is a png. The image has no CSS applied and the video has the following applied at the moment:
video {
margin-top: 4em;
width: 100%;
object-fit: cover;
filter: saturate(75%);
}
You'll need to provide more code to show us the issue. Using your video CSS alone, I was not able to reproduce the problem.
In fact, here's a working demo with what you're asking for working just fine:
div {
position: relative;
}
img {
pointer-events: none;
position: absolute;
top: -10%;
width: 100%;
z-index: 1;
}
video {
object-fit: cover;
filter: saturate(75%);
width: 100%;
}
<div>
<img src="https://i.imgur.com/VRV5rlZ.png">
<video autoplay loop muted>
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" />
</video>
</div>
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.
I am trying to play a certain video inside a PNG image of an iPhone. The iPhone is serving as a frame for the video. I was able to achieve this using this CSS code:
#phone_container {
width: 343px;
/* Adjust Phone image width */
height: 663px;
/* Adjust Phone image height */
position: relative;
}
#phone_container:after {
content: '';
display: block;
background: url('iphone png link') no-repeat top left transparent;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 10;
}
#video-placeholder {
position: absolute;
top: 125px;
/* Adjust top position */
left: 55px;
/* Adjust left position */
z-index: 5;
}
I was also able to achieve this using this HTML code:
<div class="row demo-video">
<div class="col-md-5 left-side" id="phone_container">
<div>
<iframe id="video-placeholder" src="Video Link" width="270" height="464" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
Although it is working perfectly fine, the only problem is that since the z-index of the iframe is less than the image. The Vimeo player controls are not working. I tried setting the z-index of the player controls higher than that of the iPhone but it's still not working. It's also not responsive. How do I fix this problem? Any suggestions?
Create a div element and set its width and height attributes in CSS. Then apply the background-image for that div. Then you can try to embed the vimeo video within that div:
<div class="vimeo-video">
<!-- vimeo embed link with appropriate width and height //-->
</div>
Add CSS like this:
.vimeo-video {
background-image: url('link-to-png.png');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
padding-top: /* play around with this to fit the video */;
padding-bottom: /* play around with this to fit the video */;
padding-left: /* play around with this to fit the video */;
padding-right: /* play around with this to fit the video */;
}
Keep padding values in percentages to enable a responsive design.
You can see background effect here: https://jsfiddle.net/xorkme75/embedded/result/
background is fixed here. so when you scroll the page, you can see rest of the image. for example scroll down and you can see the lady's face.
Works both chrome and firefox.
But when I add video to header. This effect not working in chrome anymore. Here is example (please see in chrome): http://areafordemos.net63.net/chrome.html
How did I break it?
I added to CSS:
#video-container {
top: 10%;
width:100%;
height:70%;
overflow: hidden;
z-index:-1;
}
video.fillWidth {
width:100%;
}
and I added to HTML:
<div id="video-container">
<video autoplay muted loop paused class="fillWidth">
<source src="xhttp://demosthenes.info/assets/videos/polina.mp4" type="video/mp4"/>
<source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm"/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
</div><!-- end video-container -->
CSS Code of broken area:
.dzen_bg {
background-image: url('http://seventhqueen.com/themes/kleo/sensei-e-learning/wp-content/uploads/sites/6/2015/06/hero16.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: 100% 12px;
background-attachment: fixed;
padding-top: 10px;
background-size: 100% 100%;
}
When I delete width: 100%; from video.fillWidth for example effect is back but video doesn't look like I want. So I am literally stuck.
What have I tried so far?
I- I tried to add z-index:-2; to .dzen_bg. It actually solved it. But another problem occurred. After that, I can't hover the inside of that div .dzen_bg anymore. Doesn't respond to mouse moves.
II- I deleted height: 70% in #video-container. Solves the problem as well but how I will set video height right now? It is covering the whole screen now. I also tried to set height: 70% to video.fillWidth after but video doesn't cover the screen anymore.
I have never puzzled that much. Is there any solution for this problem?
Your fiddle is fine, you just need to move your section down a bit.
I have made a working (with video) fiddle here is the result
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;
}