I'm trying to embed a YouTube video and have found a few answers here on how to accomplish that however, when I embed the video I would like to add a custom height of 500px to the iframe. The idea is to maintain the aspect ratio but the iframe (visible area) of the video is smaller in height. I don't mind if the top and bottom is cut off (not fully visible) so long as the height is 500px and it remains full width with no black bars on the sides of the video.
This is what I have but don't know how to tweak the height without black bar appearing.
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe></div>
You'd be able to tweak the height of the container by changing the padding-bottom value. But adding a fixed height will eventually show black bars at some point.
Like this?
.embed-container {
width: 500px;
height: 375px;
overflow: hidden;
position: relative;
}
.mask {
position: absolute;
width: 500px;
height: 50px;
background-color: red;
z-index: 1;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
<div class='embed-container'>
<div class="mask top"></div>
<iframe width="500" height="375" src="https://www.youtube.com/embed/QILiHiTD3uc" frameborder="0" allowfullscreen></iframe>
<div class="mask bottom"></div>
</div>
Related
I currently have an image that I am giving 100% width. The issue I am noticing is that while the image loads, the content below jumps up to where the image sits while it loads. I know I need to give the image some sort of fixed height, but I want the image to remain responsive. The desired effect: The image looks exactly as it does when applying 100% width and prevents the content below from jumping while the image loads. Please advise on this. My code is as follows:
<img src={"https://storage.googleapis.com/youfit-assets/239315_66400_YouFit_JUL21_Mil_Website_1680x761_CarInitial.jpg"}
alt="travel"
className="image"/>
Styles:
.image {
position: relative;
width: 100%;
height: auto;
max-height: 100%;
}
In order to duplicate what I am seeing test on an incognito browser with the following link https://codesandbox.io/s/gifted-montalcini-ohts8?file=/src/App.js
Wrap your img tag into div, so it should look like:
<div className="image-wrapper">
<img src={...} alt="travel" className="image"/>
</div>
<div style={{ marginTop: 60 }}>TEXT BELOW</div>
then replace your style for image with this style (if your aspect ratio is 4:3):
.image-wrapper {
position: relative;
padding-bottom: 37.5%;
}
.image {
position: absolute;
width: 100%;
}
or if your aspect ratio is 16:9
.image-wrapper {
position: relative;
padding-bottom: 56.25%;
}
.image {
position: absolute;
width: 100%;
}
I have this HTML structure:
<div class="container">
<img class="image" />
<div class="overlay">
<div class="insides">more elements here</div>
</div>
</div>
and this CSS code:
.container {
position: relative;
height: 88vh;
margin: 0;
}
.image {
height: 100%;
position: absolute;
margin-right: auto;
margin-left: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
.overlay {
position: absolute;
}
My requirements are as follows:
Make image fill the available vertical space and center it horizontally. (Works)
Make image overlay of the same size as the image - without using an absolute width attribute. (Does not work - problem)
Fix icons to specific spots on the image. (Using percentages for top and left attributes ... Not sure if this is going to be as easy as I currently think.)
How can I have it all - a horizontally centered image expanded to fill the vertical space, an exact overlay and elements fixed to specific spot of the image?
While I would prefer a CSS hack, a Javascript solution will be considered, too, in case the width of the image needs to be transferred to the overlay programmatically.
One way of doing it would be to wrap the Image and the Overlay in a div and center that.
.container {
position: relative;
height: 88vh;
margin: 0;
text-align: center;
}
.imagecontainer
{
position: relative;
display: inline-block;
height: 100%;
}
.image {
height: 100%;
}
.overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
<div class="container">
<div class='imagecontainer'>
<img class="image" src='imageurlhere'/>
<div class="overlay">
<div class="insides">more elements here</div>
</div>
</div>
</div>
Like this, the Image will set the width of its parent and in doing so also the width of the Overlay.
So I got a simple iframe containing a video.
It is responsive but only "horizontally".
To make things clear just take a look at this simple snippet: iFrame Sample
This is the HTML:
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item visible-xs" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>
And this is the CSS:
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
padding-bottom: 75%;
}
If you try to resize the page horizontally, the iframe resizes itself correctly.
But if you try to resize the page vertically it only slides up/down without resizing properly...
How can I solve this annoying problem?
i'm new in html, css, js etc. im trying to resize a youtube window automatically to fit the screen of the device but it doesnt work for me.
I have tried many solutions given in this website and nothing seems to work.
Here is the part of the code for the video
HTML
<div class="wrapper">
<div class="h-iframe">
<iframe class="center-block" src="https://www.youtube.com/embed/Npa-z3P1FTY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS
.h_iframe iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
.wrapper {
position: relative;
width: 100%;
}
This is what I use.
/* Flexible iFrame */
.flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" frameborder="0" style="border:0"></iframe>
</div>
live link
Fiddle
You don´t need to call .h_iframe iframe and then, below, call .center_block (Which is the name of the class in your iframe) and also:
iframe{
width: 100%;
}
The problem I have is that the video always gets black bars on the sides or on the top/bottom depending on the screen size.
Any idea how to get it full screen always without showing that annoying black bars? and without using a plugin.
This is my markup:
<div id="full-bg">
<div class="box iframe-box" width="1280" height="800">
<iframe src="http://player.vimeo.com/video/67794477?title=0&byline=0&portrait=0&color=0fb0d4" width="1280" height="720" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
#full-bg{
width: 100%;
height: 100%;
img{
display: none;
}
.iframe-box{
width: 100%;
height: 100%;
position: absolute;
background: url(../img/fittobox.png);
left: 0 !important;
top: 0 !important;
iframe{
width: 100%;
height: 100%;
}
}
}
Try adding to your CSS
.iframe-box {
max-width: 1280px; /* video width */
max-height: 720px; /* video height */
}
This means that width: 100%; height: 100% will let the element will expand as much as it can, until it hits a maximum height or width of 720px or 1280px, respectively.
If the screen you're viewing it on has a greater resolution, the node will stop expanding and you'll not have black borders.
Further, afaik the following is not valid CSS, are you using a library or something?
#full-bg {
.iframe-box {
foo: bar;
}
}
Edit after answer accepted: I just thought of a completely different way to achieve this, but it would require you to change a lot of your CSS
.fittobox { /* give fit to box an aspect ratio */
display: inline-block; /* let it be styled thusly */
padding: 0; /* get rid of pre-styling */
margin: 0;
width: 100%; /* take up full width available */
padding-top: 56.25%; /* give aspect ratio of 16:9; "720 / 1280 = 0.5625" */
height: 0px; /* don't want it to expand beyond padding */
position: relative; /* allow for absolute positioning of child elements */
}
.fittobox > iframe {
position: absolute; /* expand to fill */
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
If you know the aspect ratio of your video, you shouldn't even need Javascript. You can use a percentage-based padding-top.
I could post code, but I'd recommend you read this entire article anyway.
#Paul S. 's answer works for me for the .fittobox container for 16:9 video aspect ratios but the .fittobox > iframe embed still has black bars with his CSS. Removing the right and bottom positioning fixes it for me (no need for "px" in those 0 values, of course):
.fittobox > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}