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.
Related
Tried different method to customise(hide YouTube title,logo etc). But still not working. My goal was to hide the title top bar primarily. So looking for some guidance if this is possible at the current time?
*Tried css method,iframe viewport method and some other
Well, there is a solution since youtube deprecated the parameter showinfo, you can use html and css.
First, you have to put the youtube iframe in a div:
<div class="frame-container">
<iframe></iframe>
</div>
Next, you must increase the size of the frame so that it is outside the browser window, and then align it in the centre, since youtube only tries to centre the video and keeps its logos on the sides, this trick should work.
.frame-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
width: 300%; /* enlarge beyond browser width */
left: -100%; /* center */
}
.frame-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
and finally, to prevent everything from stretching because of the size, you put it inside a wrapper.
<div class="wrapper">
<div class="frame-container">
<iframe></iframe>
</div>
</div>
.wrapper {
overflow: hidden;
max-width: 100%;
}
EDIT 1: In case you want to disable suggested video and just allow pause, you have to replace the url with:
In that case, you have to replace the youtube url with:
https://www.youtube.com/embed/VIDEOID?playlist=VIDEOID&loop=1
When the video is looped, the suggested videos will be disabled, and even with the controls disabled you can pause the video by clicking on the video.
Fixing padding issues when using iframe css responsiveness trick.
.videoWrap {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
}
.videoWrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
People use this css trick in order to insure the iframe stays responsive while the video preserves its aspect ratio, but the problem is when you use a different value than 100%.
<div class="videoWrap">
<iframe width="560" height="315" src="//www.youtube.com/embed/xxx" frameborder="0" allowfullscreen></iframe>
</div>
I have an example below. And the issue is that depending on the device the margin between the video and the text becomes bigger, I want to keep the margin to a minimum, but it's hard to put a maximum value to the margin below of the video. Is there an easy way to do this? The only solution would be to use a lot of media query, but I only use 5 breakpoints on my website, I would have to use 9 or more to prevent the bottom margin from becoming too large.
Is there a better way around this issue?
https://codepen.io/codepen_user_123/pen/KKNmLad
I am trying to make my youtube embedded video 100% width of the screen like can be seen here but without black space between the edges which can be seen here at the side of the video. this is caused by me setting a max-height of 600px.
.
I am able to make the video responsive, and I want to set a max-height on it so that when the screen is big that it doesn't take up the entire screen, but instead just a section that is responsive but remains the same height like on the site I have shown above.
Please see jsfiddle here. If you resize the jsfiddle and make it go as big as it can you will see that it stretches below the end of the screen. I want to prevent this, but without creating black space between the video and the iframe border. By setting max-width on the iframe this black space appears which i want to avoid.
I hope there is no confusion, but if so please let me know and i can provide more details. I can see that the iframe attributes are constantly changing in the page I have provided as an example, but cannot see where this is happening.
#home-video {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
}
#home-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main-image {
width: 100%;
background: url(http://ichef.bbci.co.uk/news/976/cpsprodpb/10E0E/production/_88043196_bret_hart_1920x1080.jpg) center center no-repeat;
background-size: cover;
height: 100%;
}
<div class="main-image">
</div>
<section id="home-video">
<iframe id="video " src="https://www.youtube.com/embed/QP5_n5UmbHc "></iframe>
</section>
The page you provided uses this plugin to achieve that effect.
The plugin allows you to set a video as a kind of a background image in the same way as in the page you provided.
Hope it helps.
I'm running into a problem with tumblr cutom theme creator. When adding, for example, a video post, they put it into an iframe with a set width and height. I can reset with width of the iframe and the video will stretch accordingly, but the height stay the same (as expected).
But when I set the height to auto, it squishes into a small rectangle, instead of assuming its normal width-height ratio (as I thought it would). Is there a way to make the iframe keep the ratio set for it in the iframe, but scale it up/down with CSS? JQuery is okay too, but CSS is preferred.
HTML
<div class="video">
{VideoEmbed} // tumblr replaces this with an iframe containing the video
</div>
CSS (not working)
.video iframe {
height: auto // not working (as in, not producing desired effect)
width: 700px // working
}
You can maintain the ratio by using a simple CSS padding trick. You'll need to wrap the iframe in a container element, and set styles like this:
/*span*/.iframe-wrapper {
width: 50%;
height: 0;
padding: 40% 0 0;
display: block;
position: relative;
border: 5px solid blue;
}
/*span*/.iframe-wrapper iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-width: 100%;
max-height: 100%;
}
<span class='iframe-wrapper'>
<iframe width="560" height="315" src="https://www.youtube.com/embed/XdlmoLAbbiQ" frameborder="0" allowfullscreen></iframe>
</span>
Basically, you set the width you want the <iframe> to be, then add padding to the container to maintain the aspect ratio.
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%;
}