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).
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
<div class="container" style="text-align: center"><iframe width="100%" height="450" src="https://www.youtube.com/embed/6c7Fx2PR9Dk" frameborder="0" allowfullscreen></iframe></div>
I inserted the above code into frontpage.php on wordpress to add an embedded youtube video. However I want to edit the height of the video player when the website is viewed from mobile mode. I tried adding .container {height: 250px !important;} in the media query but that doesn't change anything. I want to know how to either change the container size so that I can set the height to auto or add code to the media query to change the video player size. This website can be viewed at beautyinstitute.us
I also tried
#media screen and (max-width: 799px) {
.container .iframe{height:250px !important;}}
in the responsive.css
The iframe is an html element, not a class. So targeting it like
.iframe
won't work. Try this:
.container iframe {height: 250px;}
WordPress can retrieve width/height of your video and generate iframe code.
<?php
echo apply_filter('the_content', 'https://www.youtube.com/watch?v=6c7Fx2PR9Dk');
?>
If you want responsive video, try Fitvids.js, a jQuery plugin.
I'd like to know if i can refer to a particular tag (in our example H1) via the link directed (Src) in an Iframe.
For the example the link http://www.marketwatch.com/story/what-the-fed-raising-rates-would-mean-for-your-credit-cards-and-bank-accounts-2016-12-14
I'd like to know if i can refer to a the first H1 in the link below ("How the Fed rate hike will impact millions of Americans") The main goal is to see the Article directly.
<iframe id="iFrame1" scrolling="no" src="http://www.marketwatch.com/story/what-the-fed-raising-rates-would-mean-for-your-credit-cards-and-bank-accounts-2016-12-14#H1" style="overflow: scroll; -webkit-overflow-scrolling: touch;" sandbox=""></iframe>
What do i mean by 'refer to the h1 tag'? I mean that I want to scroll the iframe down to that element.
The idea is to directly to a specific TAG (H1ׂ) without ID or CLASS (At All articles in all the world sites have only one H1).
Assuming that you mean you want the iframe to scroll down to the h1 tag you can add a fragment to the URL which matches the id attribute of the required element. In this case it's #article-headline. Try this:
<iframe id="iFrame1" scrolling="no" src="http://www.marketwatch.com/story/what-the-fed-raising-rates-would-mean-for-your-credit-cards-and-bank-accounts-2016-12-14#article-headline" style="overflow: scroll; -webkit-overflow-scrolling: touch;" sandbox=""></iframe>
So, basically on my website I have multiple streams and I use jquery tabs to have them all on the same page. I embed the twitch channels from their website. Now it's a bit of a mess because it's a lot of code for basically the same embed with just a different channel name, like this:
<div class="embedly-responsive" style="position: relative;padding-bottom: 75.0000%;height: 0;overflow: hidden;">
<iframe class="embedly-embed" frameborder="0" scrolling="no" allowfullscreen src="//cdn.embedly.com/widgets/media.html?src=%2F%2Fwww-cdn.jtvnw.net%2Fswflibs%2FTwitchPlayer.swff%3Fchannel%3Dcoinlives&fv=hostname%3Dwww.twitch.tv%26start_volume%3D25%26channel%3Dcoinlive%26auto_play%3Dfalse&url=http%3A%2F%2Fwww.twitch.tv%2Fcoinlive&image=http%3A%2F%2Fstatic-cdn.jtvnw.net%2Fjtv_user_pictures%2Fcoinlive-profile_image-7c29302b755258bf-600x600.png&key=0e95bd24acbf43b38a5a3a5558035397&type=application%2Fx-shockwave-flash&schema=twitch" width="400" height="300" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></iframe>
</div>
I used this approach because I don't quite understand how their API works, IDK how to use JSON. Can someone explain to me how I would make this code easier?
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;
}