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?
Related
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%;
}
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>
This question already has answers here:
Full-screen iframe with a height of 100%
(20 answers)
Closed 7 years ago.
I going to make a website that has a video as a background.
I want to load the video from vimeo but I havent found the best way to put it fullscreen.
i´m trying to add a css to the iframe but it doesn´t work at all:
iframe{
width: 100%;
height: 100%;
}
Do any of you know the best way to embed it as a background without using plugins or html5 to avoid problems with IE.
thank you!
Here you go: Demo
Wrap it in a div and set that also to 100%, 100%
iframe, div {
width: 100%;
height: 100%;
}
HTML:
<iframe src="vimeo.path"></iframe>
<div id="container"></div>
CSS:
body {
overflow: hidden;
}
iframe {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#container {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
}
DEMO:
http://jsbin.com/utezov/4/embed?live
<iframe src="http://player.vimeo.com/video/47922974" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p>Jape 'Scorpio' from Fergal Brennan on Vimeo.</p>
Now i just took a video from vimeo.
maybe set a class to the iframe like
<iframe class="fullvideo">
and set the css like:
iframe.fullvideo {
width: 100%;
height: 100%;
}
Try to use an ID to identify this bg iframe:
<iframe id="bgiframe">...</iframe>
and redefine this iframe in this way:
html, body, p, div, span, table, td
/* Add other elements... These are explicit defined since ie6/7 doesn't support * selector */
{
z-index: inherit;
background: transparent; /* this is important to see-through normal elements */
}
#bgiframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding 0;
margin: 0;
border: 0;
width: 100%; height: 100%;
z-index: -1;
}
z-index: -1; is for take this element under every other elements.
background: transparent; for every other elements is to see through and see video as background.
This can be an example:
http://jsfiddle.net/4KHET/2/
I am trying to vertically center some text over an image that appears on a mouseover. I have come to a solution that works with chrome (15.0.874.106) on a mac (10.7.2), but it seems to have issues in Safari (5.1.1), odd since they are both webkit based. I believe it also has the same problem in Firefox.
The text is vertically centered in relation to the parent div in chrome, but seems to center to the body or window in Safari. Am I doing something wrong or does anyone have a better solution?
jsbin: http://jsbin.com/iceroq
CSS:
.content {
width: 300px;
position: relative;
}
.content-text {
width: 100%;
height: 100%;
background: black;
position: absolute;
top: 0;
left: 0;
text-align: center;
display: none;
}
HTML:
<div class="content">
<div class="content-image">
<img src="http://placehold.it/300x500/E01B4C" />
</div>
<div class="content-text">
Google
</div>
</div>
.content-text a {
color: white;
position: relative;
top: 50%;
margin-top: -0.5em;
}
JS:
$(document).ready(function() {
$('.content').hover(
function() {
$(this).children('.content-text').show();
}, function() {
$(this).children('.content-text').hide();
});
});
I edited your jsbin: http://jsbin.com/iceroq/3
The edits were all CSS changes to .content-text a. Making the link absolutely positioned and giving it a height allows you to know what margin-top to give it (half of the height).
.content-text a {
display: block;
width: 100%;
height: 20px;
position: absolute;
top: 50%;
margin-top: -10px;
color: white;
}
I am using an iframe now i want to have a button inside the iframe on top right which will display only on mouse over. How can i add this button? Can anyone please help me into the right direction.
jQuery
$(function() {
var close = $('#close');
$('#frame').hover(function() {
close.show();
}, function() {
close.hide();
});
});
HTML
<div id="frame">
<iframe src="http://example.com"></iframe>
<div id="close">Close</div>
</div>
CSS
#frame {
width: 400px;
height: 300px;
position: relative;
}
#frame iframe {
width: 100%;
height: 100%;
}
#close {
display: none;
position: absolute;
top: 0;
right: 0;
border: 1px solid red;
background: #fff;
padding: 5px;
}
jsFiddle.
Keep in mind this obscures a portion of the iframe. It would be a better idea to not do this.