I'd like to limit how much of the website, within the iframe tag, will be visible. Is that possible?
<!DOCTYPE html>
<html>
<body>
<iframe src="https://www.lipsum.com/" width="300" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
You can set the width and height of an iframe to configure how much of the website will be visible at one time, but making the width and height smaller than the width and height of the embedded website will just cause scrollbars to appear so the user can scroll to see the whole website.
An iframe is designed to show the whole of whatever is in the src tag, so you can't use it to just show specific parts of that website (i.e. just the content area and not the navigation or footer), if that's what you're asking.
Related
So I need to create a website that has an iframe, navigation and logo.
So the iframe's src is an html file, that html file contains a panorama which is a flash video. So I used z-index so that the iframe is below my div that contains the nav and logo. It works on Chrome, Firefox, Safari if I'm using a Mac. Then I tried testing the website on a windows computer and the website renders perfectly on Chrome only. Firefox, Safari,and IE position the div below the iframe (thus making my whole div not visible)
I did my research. Apparently flash videos are not affected by the z-index value? And I can't try to change the flash's wmode cos it's on a third party.
Any solution to this? Thank you.
Build div container for your iframe and give it the z-index.
HTML
<div id="iframe">
<iframe src="#">
</div>
CSS
#iframe { z-index: 10000; }
I have been trying to find a solution for creating a responsive iFrame. I have found quite some solutions, but they usually describe a situation where the person wanting to embed an iFrame has control over the parent page.
If I offer embed code that allows people to embed a certain webpage into their own page by means of an iFrame, how should I do that and make sure it is responsive, without any knowledge of the parent page it will be embedded in? In other words, can I manage to implement this from the code in the iFrame itself?
Thank you!
I guess you can technically make the iframe responsive.. but I just don't see the point if the website you're pointing to isn't responsive. Here's an example: http://jsfiddle.net/uMbWP/1/
Resize the bottom right frame width to see.
I set the min-width to 320px, because that's as small as mobile devices usually go.
HTML:
<div class="wrap">
<iframe src="http://www.reddit.com"></iframe>
</div>
CSS:
.wrap {
min-height:640px;
min-width:320px;
}
iframe {
width:100%;
height:640px
}
could you help me with the following case:
I have a youtube video on my website.
<iframe width="400" height="225" src=http://www.youtube.com/embed/jKIfjiIjd?
rel=0& color=white&iv_load_policy=3&theme=light" frameborder="0" allowfullscreen></iframe>
Beneath and above this video I have some form elements like
<button class = "button" id = "video" type = "submit" onClick = "javascript: somefunction();" >some value</button>
The video is in its own div, the buttons and form elements are in their own divs.
The buttons work perfectly on the desktop browsers, however on the mobile browsers those buttons, that are beneath the video are impossible to click (top buttons are working fine) I figured out that if I remove the video from the page, all the buttons start working. The buttons also work for the first few seconds before the video is fully loaded. So, it looks, like the video is invisibly overlapping the area 100-150px beneath it and makes impossible for mobile browser users to click on any element. (ps Ive tried to use z-index of 1000 - no effect)
Please, help.
Thank you for your time.
I'm having the exact same issue with the YouTube iFrame. I've been testing all day. Here is where I'm at:
The problem is the element that is inside the YouTube iFrame.
<video class="video-stream html5-main-video" controls="true"
x-webkit-airplay="allow" data-youtube-id="..............."></video>
If you 'display:none' that, or change it to 'top:0'. It fixes the problem.
However, since it's inside the iFrame, I dont know how to change it.
To add to this discussion attached is a link to a fiddle of the issue here:
http://jsfiddle.net/krismeister/KynXG/5/
//<script src="http://www.youtube.com/player_api"></script>
<h1>The youtube iframe has a video tag which on iPad blocks touches on elements beneath the iframe.<br><em>tap below the video and you will see no color change.</em></h1>
<div id="vid-placeholder"></div>
<div id="bg"></div>
I have a div with height: 485px and I want to put an iframe inside with a width of 100% so the user can scroll the div and not the scrollbar (Im doing this because I'm using a CSS scrollbar).
<div id="demo1" style="height:485px; overflow:scroll;float: left;overflow-x: hidden;">
<iframe height="100%" width="455px" scrolling="no" frameborder="0" src="www" ></iframe>
</div>
I tried to include style to the iframe like style="height: auto;" or 100% but doesn't work.
Any suggestion how to check the height of the iframe?
Thanks
To get the height on an iframe, you'll need to communicate between two window. If you only support IE8+, then that's rather simple with postmessage. You basically use a script inside the iframe (1- the iframe content is owned by you and you add the script, or the owner of the iframe trust you and add your code snippet).
If you want to support older browser, then you'll have a lot of fun breaking the cross domain barrier.
But, that's really the only way you can get the inner height of an iframe.
I'm not sure I've quite understand your use case here, but what it seemed like to me, is that you're loading a complete website in an iframe in order to use some special scrolling effect? If that's really the case, seriously look at other solution, messing around with cross domain communication to get a simple visual effect isn't the best use of time (plus the performance hit of nesting a complete website iframe).
Hope this help!
I'm designing a mobile version of my website, which should be like a mobile application.
The problem is that there is a strange width to my html element in my mobile browser. I have tried setting body and html to width:480px; and the content is 480px but even then there is a lot of whitespace next to the content (estimated at about 300px). The effect of this is also that the website is not zoomed to the content but to the content + the whitespace and you first have to zoom in to properly use the website.
Ofcourse I want to use width:100%; so it renders well on different screen sizes.
Does anyone know what's going on or how to fix it?
Edit
The html code is just straightforward xhtml transitional, nothing special. In the css I have:
body, html {
width:480px !important;}
But if I would not set a width to those it should work right? I also don't set a width for any other elements (other than like buttons 100px and things like that) and if I view the mobile version on my computer no elements seem to be wider than the body.
Have you add the viewport meta tag ?
<meta name="viewport" content="width=device-width, initial-scale=1.0" />