I am using this method to make a video fluid
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
> iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
When I try to add a maximum width
maxwidth: 400px;
I am getting a black padding on the top and button of the video, how can avoid this ?
My question is how can I set a maximum width without getting the black padding ?
Set the width to 100% as mentioned in the article, and change the height based on the ratio of the video you've embedded and the width of the window.
This is also in the article (third section)...
(OR your question was about something else, in this case sorry for misunderstanding)
Use auto for height, then:
(When running code snippet below, select Full page, then resize browser window to see the effect)
video {
width : 100%;
height : auto; /* will retain aspect ratio of initial size */
max-width: 400px;
}
<video muted autoplay="true">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
</video>
Related
I have a shopify shop where I want to have a video banner.
I managed to set it up like the code below.
It shows up on the site and works well but I want to reduce the height of the video because it is really big. But when I adjust the height and set the video height to 75% then the bottom part of the video is not showing. It is just cut off the video.
Can I adjust the height while the video is showing the full video but rescaled?
I tried a lot of things found on internet but none worked for me. Can someone help me please?
Thanks.
Best regards,
Kevin
Liquid/HTML
{% if template.name == "index" %}
<div class="top2">
<div class="wrapper2">
<video autoplay loop muted playsinline>
<source src="https://cdn.shopify.com/s/files/1/0093/6552/0444/files/Smilezz.Promovideo.2019.Bannervideo2.1080p.mp4?4182" type="video/mp4">
</video>
</div>
</div>
{% endif %}
CSS
.top2 {
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
position: relative;
display: block;
font-size: 0;
}
.wrapper2 {
position: relative;
padding-bottom: 200%;
transform: translateY(-35.95%);
margin-bottom: -200px;
font-size: 0;
}
video {
position: absolute;
top: 0;
left: 0;
width:100%;
height: 85%;
display: block;
padding: 0;
}
The video simply needs to keep aspect ratio, otherwise the video will be cutted either vertically or horizontally.
The best approach is to control the width of video, and the height will scale automatically
Your edited CSS:
.top2 {
display: block;
/* example width - can use '%' as well */
width: 300px;
}
.wrapper2 {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
video {
position: absolute;
top: 0;
left: 0;
width:100%;
height: 100%;
}
I have a very specific scenario which I spent a decent amount of time replicating in an MCVE. As far as I can tell, these are the requirements:
Something on the page animates using the standard CSS transition property (not transform)
The HTML5 video has a poster that I provide with a url (the video still generates its own poster from the first frame anyway)
The video is absolutely positioned (used to hack a scaleable ratio)
I'm using Chrome 50 on Mac OS, but this issue has been duplicated on Windows. It does not appear to be an issue in Firefox or Safari on Mac OS.
Here is a JSFiddle illustrating the problem. Notice how when you hover over the div that says "Hover," the video switches between my poster and its own auto-generated poster. This only appears to occur before the video is played.
.anim {
width: 50px;
height: 50px;
background: grey;
transition: all 0.2s linear;
transform: rotate(0deg);
color: white;
display: flex;
align-items: center;
justify-content:center;
}
.anim:hover {
background: black;
transition: all 0.2s linear;
transform: rotate(90deg);
}
#video-container {
position: relative;
height: 0px;
padding-bottom: 56.25%; /* 16 x 9 */
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="box" class="anim">
<div>
Hover
</div>
</div>
<div id="video-container">
<video controls poster="https://pbs.twimg.com/profile_images/447374371917922304/P4BzupWu.jpeg">
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm">
</video>
</div>
Why is this happening? If I can't easily fix this, what would be the best way to maintain the scaleable aspect ratio of a video on a page that has a CSS transition?
Such situations with transitions/translates on page you can very often resolve using "magic" transform: translateZ(0) for parent or children elements (depends on situation).
In your case it is enough to add this transform to the #video-container:
#video-container {
position: relative;
height: 0px;
padding-bottom: 56.25%; /* 16 x 9 */
transform: translateZ(0);
}
Applied solution jsFiddle
This appears to be a bug in Chrome. I have submitted a Chromium bug report (Issue 617642) in hopes that it will be fixed.
In the meantime, I discovered that this issue only occurs if the element with the transition effect appears earlier in the HTML than the video. Using flex-direction: row-reverse or flex-direction: column-reverse I can switch the order of some elements in the HTML and again in the CSS so they appear in the right place but the transition does not affect the video thumbnail.
UPDATE: As of Chrome 77, this issue appears to be fixed.
Simple question, how do I set up a page overlay (just a semi-transparent black cover) so that it's 100% of the viewport's height and width, including scrollbars?
I've already tried:
body{
background-image:url(../pictures/background2.png);
background-position:top;
background-size:100% 100%;
background-repeat:no-repeat;
margin:0;
border:0;
height:100%;
}
/*Loading*/
#loadingoverlay {
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.7);
filter:alpha(opacity = 80);
top:0;
bottom:0;
z-index:99;
}
It only covers the viewport without scrollbars. In other words the moment I scroll down, the content below one screen height doesn't get covered by the overlay.
Obviously this won't work either:
/*Loading*/
#loadingoverlay {
position: absolute;
height:9999px;
width:9999px;
background-color: rgba(0,0,0,0.7);
filter:alpha(opacity = 80);
top:0;
bottom:0;
z-index:99;
}
As that just stretches the viewport into 9999x9999.
The scrollbar is not a part of the "viewport". You're styles and javascript have domain over the viewport but not the scroll bar. You can turn off scroll bars but you can not have an overlay go over it. It's possible to do windowless Flash but that's not an implementation you want.
How can you display HTML5 <video> as a full screen background to your website? Similar to this Flash site demo...
http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617
Use position:fixed on the video, set it to 100% width/height, and put a negative z-index on it so it appears behind everything.
If you look at VideoJS, the controls are just html elements sitting on top of the video, using z-index to make sure they're above.
HTML
<video id="video_background" src="video.mp4" autoplay>
(Add webm and ogg sources to support more browsers)
CSS
#video_background {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000;
}
It'll work in most HTML5 browsers, but probably not iPhone/iPad, where the video needs to be activated, and doesn't like elements over it.
I might be a bit late to answer this but this will be useful for new people looking for this answer.
The answers above are good, but to have a perfect video background you have to check at the aspect ratio as the video might cut or the canvas around get deformed when resizing the screen or using it on different screen sizes.
I got into this issue not long ago and I found the solution using media queries.
Here is a tutorial that I wrote on how to create a Fullscreen Video Background with only CSS
I will add the code here as well:
HTML:
<div class="videoBgWrapper">
<video loop muted autoplay poster="img/videoframe.jpg" class="videoBg">
<source src="videosfolder/video.webm" type="video/webm">
<source src="videosfolder/video.mp4" type="video/mp4">
<source src="videosfolder/video.ogv" type="video/ogg">
</video>
</div>
CSS:
.videoBgWrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.videoBg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-aspect-ratio: 16/9) {
.videoBg{
width: 100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9) {
.videoBg {
width: auto;
height: 100%;
}
}
I hope you find it useful.
Just a comment on this - I've used HTML5 video for a full-screen background and it works a treat - but make sure to use either Height:100% and width:auto or the other way around - to ensure you keep aspect ratio.
As for Ipads -you can (apparently) do this, by having a hidden and then forcing the click event to fire, and having the function of the click event kick off the Load/Play().
P.s - this shouldn't require any plugins and can be done with minimal JS - If you're targeting any mobile device (I would assume you might be..) staying away from any such framework is the way forward.
I'm attempting to use CSS3's resize to make an absolutely positioned div resizable in Safari and Firefox Beta. No matter what I do I can't seem to make it work – are there situations that resize cannot be used?
In order for it to work in Safari, it seems to need overflow:auto applied to the div.
Additionally, the display height and width of the div will act as min-height and min-width.
This only worked for me in Safari, not in Firefox 3.5.
<div id="box"> Nice box </div>
CSS:
#box {
/* important */
resize: both;
overflow: auto;
/* Styling */
background: red;
position: absolute; /* per the question */
top: 50px;
left: 50px;
width: 300px
}