As you can see, my iframe height adjustment is not working while "width 100%" is okey.
Sample iframe post
I tried to add some different codes in template and in post, but as an ordinary blogger user, I could not make it.
Thanks for help!
<div style="max-width: 800px; max-height: 800px;">
<div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.3%; overflow: hidden;">
<iframe src="YOURLINK"
allowfullscreen
style="position: absolute; top: 0px; left: 0px; height: 100%; width: 1px; min-width: 100%; *width: 100%;"
frameborder="0"
scrolling="no">
</iframe>
</div>
</div>
I solved my problem thanks to this code. It is arranging the "hight" responsively and you can adjust the content dimensions additionally.
Related
Can someone tell how to get a responsive image with AMP with a height max limit instead of a fixed height?
Thank you.
At this stage I found this:
HTML
<div class="fixed-height-container">
<amp-img data-hero class="contain" width="225px" height="150px" layout="fill" src="/myimage.jpg"></amp-img>
</div>
CSS
.fixed-height-container {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 380px;
}
amp-img.contain img {
object-fit: cover;
max-height: 200px;
}
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>
I have this code:
<iframe scrolling="no" src="http://www.portalminero.com/display/bols/Bolsa+de+Metales"
style="border: 0 none; margin-left: 100px; height: 860px; width: 970px;"></iframe>
When I run it I load height I want, but I don't want to show the header of the page... just start in "Bolsa de Metales" title.. how can I do this?
There is no way to do that with CSS or JavaScript if the loaded page is not on your domain (cross-domain).
A simple solution could be just to add a div with a white background and add it as layer on top (positioning with css):
HTML:
<div id="myDiv"></div>
<iframe id="myIFrame" scrolling="no" src="http://www.portalminero.com/display/bols/Bolsa+de+Metales"></iframe>
CSS:
#myIFrame {
border: 0;
margin-left: 100px;
height: 860px;
width: 970px;
}
#myDiv {
background-color:#fff;
margin-left: 100px;
width: 970px;
height: 40px;
position: absolute;
}
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