This question already has answers here:
Shrink a YouTube video to responsive width
(11 answers)
Closed 8 years ago.
I have small problem with parameter height of div which contain YouTube iframe (alredy responsive).
Background of player is set to 636px. When I resize the window player is scaling but not the space under it.
WEBSITE: http://www.kudlatyworkshop.com/motorsport/
The css for background:
#slider_container {
position: relative;
z-index: 1;
margin-top: -131px;
height: 636px;
and for YouTube:
.video-container {
position: relative;
padding-bottom: 52.25%;
padding-top: 50px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I tried to fix it by #media tag but it not this what I'm looking for.
Thanks for any help and sorry for my english.
Kuba
The height of the slider container never really changes. You need to specify (in each of your breakpoints) a height that looks consistent with the size of the video.
The reason you're having to specify a height at all is because the flex slider has position: absolute; (which may or may not be a requirement of the js running it) so it's rendered, but not within the document flow.
I'd say the quickest fix is either a) reconfigure your breakpoints and have more of them so the height can change more often to give a responsive appearance, or b) override absolute positioning from the .flexslider class with a .flexslider class of your own with position: static;
If the video is the only thing you're showing on this page, then you should be fine.
Related
This question already has answers here:
Maintain aspect ratio of div but fill screen width and height in CSS?
(9 answers)
Closed 8 years ago.
If I have an element (such as div#frame) that I want to populate as much of the screen as it can while still maintaining a designated aspect ratio (such as 16:9), what styles must I apply? I am certain there are a handful of different solutions in Javascript, but I want to try an approach with only CSS.
I've searched around, and although there are already some solutions in CSS, they use a percentage padding, which is calculated by the value of the width, which means the aspect ratio is only maintained when the browser is horizontally resized, and not vertically resized.
#frame
{
/* centered */
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
position: fixed;
/* aspect ratio */
width: 100%;
height: 0px;
padding-bottom: 56.25%;
}
This works good enough, but I want a solution that will still maintain the aspect ratio of the element when resized both horizontally and vertically, as seen in the image I've embedded below.
I don't think it is possible to set the width of an element based on the height, using css properties as they were meant to be used. So you better start considering JS there ;)
There is a hack involving an image though, but it is not great. Maybe you can expand on the idea (I would still prefer JS).
You will need an image with the maximum size you want your frame to be. A transparent gif should do. Then you let the native behaviour of the image set the wrapper's size, using inline-block on the wrapper. Then you use an absolutely positioned element inside the wrapper to hold your content:
<div class="wrapper">
<img src="https://cdn.boldernet.net/0/0/856/856567-450.jpg">
<div class="content">
content
</div>
</div>
CSS:
body {
text-align: center;
}
.wrapper > img {
display:block;
max-width: 100%;
max-height: 100%;
}
.wrapper {
display: inline-block;
position: relative;
top: 50%;
}
.content {
position: absolute;
background: blue;
left: 0;
top: -50%;
width:100%;
height:100%;
}
I am trying to find a way to hide the black strips across the top and bottom of a vimeo video. I thought there might be a way to cover them up with CSS.
I basically wanted to achieve what this person wanted to achieve with an image in the link below except I want to do it with an embedded video whilst keeping it repsonsive.
Removing black borders 4:3 on youtube thumbnails
Many thanks.
HTML
<section class="d5-d13 c5-c13 b5-b13 a5-a13 video">
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/69252713' frameborder='0'
webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</section>
CSS
.embed-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
For your use case, I don't think you'll be able to use just css.
Usually we add letterboxing or pillar boxing around video iframes to keep the height and width at a certain ratio for presentation. But in that case, the black borders would just be as simple as a css background.
To keep things responsive, you would set the height to something like zero (like you have) and use the padding hack to keep the aspect ratio of the video (in this case a 16:9 video; 9/16 * 100 = 56.25%). That number would be either your padding-top or padding bottom value. Since the padding is measured with percent, this scales the padding in relation to the width keeping the correct ratio no matter what width you size the video to.
In your case, this video actually has the letterboxing in the actual video which you can see from the source of the video tag within the iframe. I'm not sure why you have the padding-top:30 but that makes the black borders even bigger. You'll need to hack your situation even more though because of the built in letterboxing. I put together a jsfiddle demo here which includes a few comments but it uses JS to achieve what you're looking for.
The concept for the code is as follows:
You want the outer container to crop off the bottom and top of the
video. Assuming you wanted the video to be responsive, and be cropped, you need to always have the actual video be larger than the outer container which masks it.
The video should be moved up in relation to how wide the video is vs the thickness of the top border
You'll want to shrink the height of the outer container a bit to compensate for the negative top margin yet still hide the bottom portion of the video
Personally I don't like doing expensive DOM operations on resize which maybe is the reason you asked for solely css but FWIW, you have the demo.
Ideally your best option would be to get the video re-recorded without the letterboxing so all you would need is the padding hack.
Cut the 1px off all edges with CSS:
.embed-container {
position: relative;
padding-bottom: 43%; /* Aspect ratio of the video */
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: -1px;
left: -1px;
width: calc(100% + 2px);
height: calc(100% + 2px);
}
HTML:
<div class="js-video [vimeo, widescreen]">
[video html goes here]
</div>
CSS:
.js-video {
height: 0;
padding-top: 25px;
padding-bottom: 67.5%;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.js-video.widescreen {
padding-bottom: 57.25%;
}
.js-video.vimeo {
padding-top: 0;
}
.js-video embed, .js-video iframe, .js-video object, .js-video video {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
You will find more details here
I had this same issue and the problem was simple to solve. My videos were embedded in Wordpress pages and posts using oEmbed. Wordpress was wrapping my embedded videos in <p> tags, the <p> tags had some margin which was causing black borders on the top and bottom of my videos. I used the following bit of jQuery to remove the <p> tags from my embedded videos:
$('.embed-container iframe').unwrap();
I solved this problem by removing padding-top in .embed-container
padding-bottom: 56.25%; will set screen ratio to 16:9 and remove the black bar in top and bottom.
padding top here will add extra black bar area back.
I created a solution for this exact problem using a portion of this github post. Removing Black Bars. It doesn't change vimeo's background color but merely hides it from the viewport.
https://github.com/davatron5000/FitVids.js/issues/130
#myid {
height: 112.6%;
}
However, If you add a width using CSS "vw"(viewport width) it will size consistently on any monitor/device without showing the black background. I added a margin so that the iframe will stay centered in the div once the width is shorter.
#myvimeoiframeID {
height: 112%;
width: 80vw;
margin: 0 15% auto;
}
In my parent container that holds the video, I added:
.embed-container {
padding-bottom: 40.25%;
}
This seems to make sure the video shows in the div. When I removed this section the video disappears but you can still here it play. So there is something that is pretty awesome with the padding-bottom: 40.25%;
I changed the vimeo embedded iframe code to have a height="100%".
So you can add a height to the iframe or you can do it in css. In order to control the height by css, I kept the base height in the iframe at 100% and any adjustments to that base height is through the css.
Simply put frameborder="0" as one of your attributes.
I just solved this -
The video container was built with a video-captions-container DIV which was a black transparent bar.
I am trying to embed this video on this virb page: http://www.amytdatta.com (password: tyma)
It's an album pre-release, hence the site password, sorry!
Try as I might, i'm unable to emulate the full window scaling behaviour of the vimeo video page. I've tried putting min-width: 100%, min-height: 100%, max-height: 100% everywhere but my embedded video is taller than the browser window and doesn't scale in the neat way the vimeo page does.
any advice?
The problem lies within your CSS properties.
If you take a look at the following codesegment (base.css, line 208):
#main-content .content-editor .video-container {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
position: relative;
}
You will see that you have a padding at the bottom aswell as a defined position. Just delete those two lines, so it looks like this:
#main-content .content-editor .video-container {
height: 0;
overflow: hidden;
padding-top: 30px;
}
It'll look like you want it to.
I’m embedding a youtube video via the iFrame API.
The video itself is square–shaped and it’s width and height depend on the container’s size (a square as well, with fluid dimensions) — I’m using CSS to achieve that.
Everything works more or less okay, but in the beginning and the end of the video (before starting and after stopping), the content is displayed with reduced width, revealing black side bars:
Any idea why this happens or what to do about it? Has someone made a video with irregular shape work in context of a responsive layout?
Update
It seems that setting the width and height to 101% helps. Not sure yet how consistently, though.
<div class="video_iframe_wr">
<iframe/>
</div>
.video_iframe_wr {
height: 0;
padding-bottom: 100%; /* that makes height = width */
position: relative;
}
.video_iframe_wr > iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width:100%;
height:100%;
}
I found fluidvids.js and am using that on my site, but it only accounts for width. I have some users who have more of a panoramic, narrow height viewport for their browser, and can't see the controls on my video because the window is so wide (900px) that the video width doesn't scale for the height. I'd like to have responsive height, and have looked at several posts on AListApart, etc, and can't find the obvious solution. Let me know if you have any tips or see the glaring thing I'm missing.
Just learning about CodePen, but my relative links to all the js seems to make that a little complicated (sorry).
Here's the link: http://chrisphoto.com/masters2/index.html#chapter-2
Here you can get some awesome tricks on responsive videos in CSS, youtube iframe too.
For both Vimeo and Youtube videos, wrape the iframe in a div giving it a class "video_wrapper"
.video_wrapper{
margin: 82px auto;
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0; width: 80%;
}
.vdo_span iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80%; /* Adjust height to your own need */
}