how can I adjust the width and height for all iframe that has only youtube link
<iframe width="420" height="315" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/xbGv2T456dfg3">
because I have some the uses iframe also but I only need to adjust all iframe that has a youtube link.
css
iframe {width:560px;height:316px;}
need help on this
Use an attribute selector:
iframe[src^=http://www.youtube.com] {
width:560px;
height:316px;
}
If the link might be https, or some other variations, you can use the more liberal *= selector:
iframe[src*=.youtu] {
width:560px;
height:316px;
}
Related
WordPress PHP load a simple div on scroll
in my case, I need to load the map only when people scroll to it, don't need to be there or loaded all the time only if someone scroll to it is on the end of the page
this is the code
?><iframe width="100%" height="400" id="gmap_canvas" src="https://maps.google.com/maps?q=<?php echo do_shortcode( '[SLUG]' ); ?>&t=&z=11&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><br><style>.mapouter{position:relative;text-align:right;height:400px;width:100%;}</style><?
what is the best way to load this block on the scroll ?
load 300px before getting to it.
thank you
I tried to add the code into body tag but it doesn't work.
<iframe width="0" height="0" src="here.mp3" frameborder="0" allowfullscreen></iframe>
you can use embed tag for this like below
<embed src="yourMusic.mp3">
OR
<audio src="yourMusic.mp3">
Also, you can check more options here https://www.w3schools.com/tags/tag_embed.asp
I need a iframe with link attached to that iframe. I have a iframe with src containing image file and id containing the url where i should be navigated. I should not use javascript or any php coding for link creation. when i paste that iframe in any page, its should be a clickable iframe.
adding tag doesn work in some browsers like chrome and firefox.
Eg:
<iframe src="imagepath" scrolling = "no" width="728" height="90" id = "redirect url"></iframe>
With the following HTML and CSS you get an iframe with a link overlay. You have to specify the redirect url in the a tag. If you you really have to specify it in the id of the iframe, you definitely need JavaScript.
Here's a demo how it looks like (only tested in Chrome): http://jsfiddle.net/2kA3J/
CSS:
#container {
position:relative;
width:400px;
height:400px;
}
#container a {
position:absolute;
width:100%;
height:100%;
}
#container iframe {
width:100%;
height:100%;
}
HTML:
<div id="container">
<iframe src="imagepath" scrolling="no" ></iframe>
</div>
I have used iframe for view multiple image with in the frame and I want to hide the Horizontal Scroll Bar. I Have used following code snippet.
<div class="framepart">
<iframe src="http://docs.google.com/gview?url=http://www.puthuvannam.com/vendors/sample/documents/<?php echo $res['name'];?>&embedded=true" style="width:600px; height:500px;overflow-y:hidden;" scrolling="no" style="overflow:hidden" frameborder="0">
</iframe>
</div>
<iframe src="" scrolling="no"></iframe>
iframe { overflow:hidden; }
scrolling="no" will work in IE10, Chrome 25 and Opera 12.12.
However the <iframe> scrolling attribute is not supported in HTML5, even though most browsers understand it.
See this article to learn more on scrolling.
I think I found the problem.
I changed the src of the <iframe> to http://docs.google.com/gview?url=http://www.google.com/&embedded=true (http://jsfiddle.net/U8JCj/2/).
By inspecting this in Developer Tools, it can be seen that it is not the <iframe> that has an overflow, but the inner <div id="content-pane"> which has overflow: auto. As this is internal to Google Docs, it is not a style you can change, and therefore there is no solution to this (while using Google Docs).
I was trying to set a dynamic height to an iframe but it always fail; I'm looking for an iframe alternative that retrieves contents from webpage and display it in the holder page with dynamic height. Any suggestions?
Add this to your <head> section
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
And change your iframe to this:
<iframe name="Stack" src="http://stackoverflow.com/" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
search for responsive Iframe on google. There are a lot of tutorials and examples out there.
height:100%; will be an important keyword