I am trying to embed an iFrame in a content management system which will later act as a preview function when making changes to a page. Trouble is, the iFrame won't change size, and I'm bewildered.
Video link to example: https://www.icloud.com/sharedalbum/#B0b5M7GFPGbX4Tu
How can I make the height responsive to the CSS values I'm entering? What's happening?
try this
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="videowrapper">
<iframe width="853" height="480" src="-YOUR-URL-HERE-" frameborder="0" allowfullscreen></iframe>
</div>
Related
I want to wrap a laptop image around a youtube video. I allready got a solution for that. Now i want to make everything responsive for smaller devices. Any solutions for that ?
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
#tv_container {
background: url('img/video.jpg') no-repeat top left transparent;
width: 1440px; /* Adjust TV image width */
height: 810px; /* Adjust TV image height */
position: relative;
}
#tv_container iframe {
position: absolute;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: relative;
top: 78px;
left: 252px;
width: 65%;
height: 67%;
}
<div class="container">
<div id="tv_container">
<div class="videoWrapper">
<iframe width="760" height="315" src="https://www.youtube.com/embed/qidS1nnK0Ps" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
You should change the #tv_container styles to use a variable width:
#tv_container {
background: url('img/video.jpg') no-repeat top left transparent;
width: 80%;
height: auto;
position: relative;
}
I also used an auto height for the container so it changes according to its width.
First of all, the video is kinda scaled and I'd love it to fit in the whole screen. Besides that, I can't figure out how to make video responsive on all screen sizes.
HTML
<div class="spread-video">
<video src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" autoplay="" loop="">
</video>
</div>
CSS
.spread-video {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
Does anybody know how to achieve this? Thank you in advance!
Target the <video> instead of the parent div, see fiddle: https://jsfiddle.net/m1pz6zcu/4/
.spread-video > video {
width: 100%;
}
Since the aspect ratio of the video is different from that of the view port, a work around for the issue is to make the video width bigger then the viewport width, center it and hide the overflow. See fiddle: https://jsfiddle.net/m1pz6zcu/6/
.spread-video > video {
width: 200%;
margin-left: -50%;
}
.spread-video{
overflow: hidden;
}
Add the following css
.spread-video video {
width:100%;
}
https://jsfiddle.net/mlegg10/fsftz8rt/4/
/* 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>
Try this
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
padding-top: 25px;
or this one
position: absolute;
width: 100%!important;
height: 100%!important;
I don't have access to my css and would like to embed a responsive YouTube video with in line CSS...
Is this possible? and could you please provide the div snippet?
Thanks
nothing complicated, check this fiddle:
http://jsfiddle.net/gwfttfze/
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
edit
(based on first comment)
Use classes that are already defined in your css
<div class="product__video">
<div class="video-wrapper">
<iframe width="560" height="315" src="//www.youtube.com/embed/dfSk1c6SzKw" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
Can i overlap an iframe using a div so it is not clickable?
This is what i have (and doesn't work in Firefox)
Here is the HTML code:
<div class="container">
<div class="do-not-allow-click"></div>
<div class="iframe-container">
<iframe width="420" height="315" src="//www.youtube.com/embed/T4-PSYiYUzQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
And these are the CSS rules:
.container {
position: absolute;
top: 0;
left: 0;
height: 315px;
width: 420px;
}
.do-not-allow-click {
cursor: move;
height: 100%;
top: 0;
left: 0;
position: absolute;
width: 100%;
z-index: 9999;
}
.iframe-container {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
When you embed a youtube link in an iFrame, the default wmode is windowed which apply a z-index greater then everything else and get overlay at the top.
To solve this append wmode=opaque to the source URL like this
http://www.youtube.com/embed/T4-PSYiYUzQ?wmode=opaque
So your iframe code will be as below
<iframe width="420" height="315" src="http://www.youtube.com/embed/T4-PSYiYUzQ?wmode=opaque" frameborder="0" allowfullscreen></iframe>
Check this: overlay opaque div over youtube iframe
Is it possible using pure css to get a youtube embed to be fluid both horizontally and vertically?
Basically this means that the video aspect ratio is kept at all times, no matter the width/height of the parent. For example, if the parent div was very wide and short, the video would have gaps on both sides. If the parent was very thin and tall, the video would have gaps on the top and bottom.
This is how I do it, compliments to http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
DEMO
<div class="thumbnailContainer video_embed">
<iframe src="//www.youtube.com/embed/Kdgt1ZHkvnM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
.thumbnailContainer
{
overflow: hidden;
position: relative;
width: 100%;
}
.thumbnailContainer.video_embed
{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.thumbnailContainer.video_embed iframe
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}