I am trying to fit an iframe properly inside this div. Here's what it looks like right now:
How do I adjust the iframe's height so you can see the whole video. Thank you
After you grab the iframe from YouTube:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/RFaqnamTfm8"
frameborder="0" allowfullscreen>
</iframe>
Just increase the height property until you get the desired effect, which should do the trick.
Related
I'm wondering how to make the img content inside of my iframe fit to the size of my frame. When i display a pdf inside of the iframe it scales perfectly but displaying a png looks bad because the image returned doesn't scale to its container. Any help would be greatly appreciated! :)
You will have to create a simple webpage inside the iframe, so you can add a height and width to the image
You can actually call object and load it inside it.
<a :href="urlToImage" target="_blank"> <object :data="URLToImage" title="SamplePdf" width="200" height="150"> </object></a>
i replaced iframe elements on a dynamic content page by amp-iframes. Please have a look at following structure. I dont know the size of the iframe, because layout is responsive and content is not static:
<amp-iframe width=300 height=200
layout="responsive"
sandbox="allow-scripts allow-same-origin"
class="unknown-size">
<amp-img class="unknown-size" width="300" height="200" layout="responsive"
src="/images/logo.png" placeholder>
</amp-iframe>
The AMP-Iframe is responsive, its working fine. But i have problems with the iframe child elements (like a embeded video). There is a ugly gray distance to bottom, because the child element (iframe) is not fully stretched.
I am not able to remove the redundant gray space below my embed video. Can anyone help me, please?
I solved it. With the iframe I included the JW Player, which have a aspect ratio from 16:9.
I add those values to height and width attributes in my amp-iframe, now its working perfectly
<amp-iframe width=16 height=9
layout="responsive"
sandbox="allow-scripts allow-same-origin">
<amp-img class="unknown-size" width="300" height="200" layout="responsive" src="/images/logo.png" placeholder>
</amp-iframe>
I can't figure out how to resize the content of a pdf inside a responsive iframe?
As you can see from the image below the iframe has resized however the content hasn't.
View
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src='#Url.Action("ShowPDF", "BillPayment", new { sessionId = #Model.SessionId })#zoom=150' width="100%" height="525" id="iFramePdf" #zoom="200" frameborder="0"></iframe>
</div>
Please advice?
Maybe that could help you :
How to make a PDF responsive
Just an idea but you could get two versions for the pdf, or two level zoom depending on you iframe width ?
I am working on WCAG 2.0 ,one of the requirement says Use relative rather than absolute units in HTML attributes. Use percentages rather than pixels for sizing frames and tables.
The actual problem is with iframe controls. When ichange the width its fine , but the height is not changing when it changed from px to %.
The content of iframe is cross domain.
<div xmlns="http://www.w3.org/1999/xhtml">
<iframe id="led_frame" width="1000" height="900" frameborder="no" title="Employment Dynamics" src="http://lehd.did.census.gov/led/index.html" name="led_frame" style="margin- left:-35px">
..............
</iframe>
</div>
i tried
1. adding height to container div.
2. adding height to body tag.
Any suggestion will be helpful..............
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Resizing an iframe based on content
I have an iframe where the src is an HTML file and this iframe is put inside usercontrol:
<iframe frameborder="0" src="CName.htm" align="left" width="730" height="1100" ></iframe>
I need the iframe to resize according to the content so that it's height is set according to the hieght of the HTML file and I don't need to use scrolling attribute.
Do you have any idea?
I've used the following jQuery code to do this:
$('#iframe_id').load(function () {
$(this).height($(this).contents().height());
$(this).width($(this).contents().width());
});
I don't think this will work if the iframe contents are cross-domain, though.
You can figure out the height and width of the content inside the frame, then call a function that's on the frame's owner to set the iframe element's height and width.
There is a way! Its in jquery and its too simple. Kinda hacky..
$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );
There you go!
Cheers! :)