I set up a iframe like below
<iframe src="http://www.bbc.com/" frameborder="0" width="100%"></iframe>
CSS
iframe { overflow:hidden;
min-height:600px}
2 horizontal scrolling bars appear, 1 is at the iframe and the other is at the browser.
I want to get rid of the bar at iframe, I try
<iframe src="yahoo.com" scrolling="no" frameborder="0" width="100%"></iframe>
Then the scrolling bar at the iframe disappeared, and the problem is I cannot see anything at the bottom of BBC website!
I could increase min-height to greater number to cover entire length of BBC's page, but sometimes the page is very short and I'll get a huge white space at the bottom! So that increase the min-height is not a good practice.
How can I remove the scrolling bar at the iframe and use the browser's scrolling bar to navigate the page up and down?
Thank you!
There are different ways of doing this. There's jQuery solutions too. This will help you get started:
DEMO: http://jsbin.com/voqubo/1
CSS
body,html {padding:0;margin:0;height:100%;}
html {overflow-y:auto}
.embed-container {
position: relative;
height: 100%;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
}
HTML
<div class='embed-container'><iframe src='http://www.bbc.com/' style='border:0'></iframe></div>
<iframe
src="http://maroof.sa/Business/GetStamp?bid=203783"
style=" width: auto; height: 250px; overflow-y:hidden; "
frameborder="0"
seamless='seamless'
scrollable="no">
</iframe>
Related
I'm struggling to get a map, which is embedded via an iframe on a WordPress page, to show responsively on full height of the screen, independent of the device: http://www.svalbox.no/map.
Full height means, the bottom of the map should not extend beyond the screen, i.e. the user should not have to scroll down to see the full app. The upper limit is obviously the navigation bar.
In the WP page editor, I included the following HTML/CSS (taken from various sources):
<style>
.embed-container {
position: relative;
height: 0; min-height:550px;
padding-bottom: calc(60rem + 10px);
max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
small{
position: absolute;
z-index: 40;
bottom: 0;
margin-bottom: -15px;
}
</style>
<div class="embed-container">
<small><a>href="http://unis78.maps.arcgis.com/apps/webappviewer/index.html?id=68c88c8c310a4c42bccd6ec41dbc04ea" style="color:#0000FF;text-align:left" target="_blank">View larger map</a></small>
<br>
<iframe width="940" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="Svalbox" src="http://unis78.maps.arcgis.com/apps/webappviewer/index.html?id=68c88c8c310a4c42bccd6ec41dbc04ea"></iframe>
</div>
It works for the width, which adapts to the viewport size. Whatever I try though (setting various height: 100%) doesn't work: either nothing happens or the whole map app shrinks to 40px... I know some HTML/CSS, but this one bugs me obnoxiously since hours..
Any help is appreciated.
Thanks
Nils
.embed-container{height:100vh;}
vh unit stands for percent of viewport(browser window) height. 100vh will give 100% of browser window height to the element. currently support for vh unit is limited(https://caniuse.com/#search=vh)
TL;DR: I need a scaled iFrame to be centered on larger screen sizes. I know this is a problem due to absolute positioning in the method.
I'm trying to embed an iFrame (YouTube video specifically) to a website. As it's 2017, I want the site to be responsive, and naturally, I want the embedded video to be responsive as well. So I found some code online that does this, it appears to be the common method for responsively sizing iFrames. I understand what's going on here.
Relevant HTML:
<div class="videoWrapper">
<iframe width="530" height="315" src="https://www.youtube.com/embed/4OJWC1tn_t4" frameborder="0" allowfullscreen>
</iframe>
</div>
Relevant CSS:
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
padding-top: 20px;
overflow: hidden;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This is where the above code gets us to.
This works fairly well, but the video takes up 100% of the container space. It should though, it's coded that way. But what if I don't want it to do that? It looks really bad on larger screen sizes to have a video take up the whole window. I couldn't find an answer to making this not happen, so I tried putting my "videoWrapper" within another called "videoSizer" and scaling that down to width: 60% with height: auto when the screen size is greater than 480px.
Relevant HTML:
<div class="videoSizer">
<div class="videoWrapper">
<iframe width="530" height="315" src="https://www.youtube.com/embed/4OJWC1tn_t4" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
Relevant CSS:
#media only screen and (min-width: 480px) {
.videoSizer {
width: 60%;
height: auto;
}
}
This is where the above code gets us to.
So the size is about where I want it, and it looks nice on the page, but it's stuck in the top left corner of its container. That's how it should be, it's coded to that absolute position in the container. It's doing what I told it to. However, what I don't understand, and herein lies the problem, when I change the position coding in any way that I've thought of so far, the container size stays the same, but the iFrame element disappears.
So I would like to get the video centered on the site without it taking up 100% of the window, but am out of ideas and knowledge of how to have that happen. If anybody had any suggestions, I'd be really appreciative! I hope I've written this in a way that's descriptive enough and has enough resources attached to adequately explain the problem.
Answer (credit to LKG for helping me find it):
Remove #media query mentioned above. Not necessary, and creates problems.
Code as in LKG's answer, seen below.
To properly calculate bottom padding based on this:
- Add margin and element widths together
- Divide element width by margin width (we'll call this p1)
- Divide iFrame element height by width (call this p2)
- Multiply p1 by p2
- Answer is your new padding-bottom value
Just change css to get center
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
right:0;
margin:auto;
}
html,
body {
margin: 0;
padding: 0;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
padding-top: 20px;
overflow: hidden;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="videoWrapper">
<iframe width="530" height="315" src="https://www.youtube.com/embed/4OJWC1tn_t4" frameborder="0" allowfullscreen>
</iframe>
</div>
CSS:
.vertical-center {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
HTML:
<div class="vertical-center">
<iframe width="560" height="315" src="../assets/video.mp4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
<p>Error loading video</p>
</iframe>
</div>
I have added slideshare iframe with presentation to my page
Code: <iframe src="//www.slideshare.net/slideshow/embed_code/key/HQoiz6GR1oLe1n" width="860" height="600" frameborder="600" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
But when I open page at mobile phone there appear black area around presentation:
screnshot
I know that it happens because of style height="600", but when I remove it presentation becames small. How to remove this black areas around presentation?
With some CSS it’s very easy to make slideshare embeds that scale the height in relation to the actual width.
You need to add an outer , with 0 height, and 100% width, and a padding-bottom as percentage of the aspect ratio (eg 9 / 16 = 56.25%) with an extra padding of 38px for the slide navigation.
<div class="iframe-slideshare-16x9">
<iframe src="//www.slideshare.net/slideshow/embed_code/key/h1Fw1vmfv5uVlM"
frameborder="0"
marginwidth="0"
marginheight="0"
scrolling="no"
allowfullscreen>
</iframe>
</div>
The CSS looks like this:
.iframe-slideshare-16x9 {
padding-bottom: calc(56.25% + 38px);
position: relative;
width: 100%;
height: 0;
}
.iframe-slideshare-16x9 iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:1px solid #CCC;
}
More on this, at my blog: https://nathan.gs/2018/01/07/responsive-slideshare-iframe/
this is not issue with iframe as your iframe is working properly and it is responsive
the problem is images/slides in slideshare iframe are bit small in height and I believe you cant do anything about it
hope it helps
Add the following media query to your css:
#media (max-width: 667px) {
iframe {
width: 280px;
}
}
Feel free to tweak values as desired.
I am trying to embed a video from YouTube into my site. I am wondering if there is a way to relate the width and height based on the window size. For example, on an iPhone it looks something like THIS. Can I make the video shrink in width to smaller than the display size? Can I tie in my responsive site somehow, to get that?
It works great on computers or other larger screened devices, but not mobile.
Source:
<center><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/zRDi1DT3AFA?rel=0" frameborder="0" allowfullscreen></iframe></center>
Full page source
Thanks for the help!
[edit: source]
It is possible to embed Youtube videos responsive by overriding the Youtube style (CSS).
Add the following CSS:
.video-con {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-con iframe,
.video-con object,
.video-con embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
And then wrap the iframe with div:
<div class="video-con">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/zRDi1DT3AFA?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
I seem to have the opposite problem of everyone else with iframes and scrolling. I need the iframe (contains a youtube video) to NOT prevent scrolling of the main document. If I hover my mouse over it, the page won't scroll with the scroll wheel, and according to the latest chrome canary simulation of touch devices, I can't put my finger on the frame and scroll the main document either. Any way to stop this? My CSS is below:
.GalleryVideoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
width:95%;
margin:auto;
display:block;
}
.GalleryVideoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The question is unclear, so I went into some detail below on various ways to achieve this effect and how it works.
If you don't need to interact with the iframe, the quick and dirty solution is to use pointer-events: none;. This will put the iframe on the page, and not allow it to scroll. However, it also does not allow you to click on it. This obviously won't work for a YouTube video, but it is important to know this is an option.
If you need to interact with the iframe, either to play a video or click a link, all you need to do is make sure the iframe is large enough to display the full contents. I'm unsure what specific problem OP was encountering as we don't have their HTML, but if you scroll and the iframe is not also trying to scroll, it will not prevent the parent from scrolling.
Basically, if you have your cursor over an iframe and you scroll, the iframe will receive the event first. If it does not need to scroll (either it can't or it has already reached the bottom of the iframe) the event will be propagated to the parent.
Finally, if you have an iframe that you need to be scrollable, but you want to scroll the parent while the cursor is on the iframe, you are out of luck. There is no way to inform the iframe that sometimes the user wants to scroll the whole page. This is simply how iframes work. You can either remove the cursor from the iframe to scroll, or scroll to the bottom of the iframe and continue down the page.
Using a YouTube video and the CSS in the question, I've included a demo for you to see. I also included two identical iframes that are scrollable and applied pointer-events: none; to one to demonstrate how it works.
.tall {
height: 1500px;
}
.GalleryVideoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
width: 95%;
margin: auto;
display: block;
}
.GalleryVideoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.scrolling-iframe {
margin-top: 35px;
display: inline-block;
height: 500px;
}
.no-scroll {
pointer-events: none;
}
<div class="tall">
<div class="GalleryVideoWrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/hzB53YL78rE?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<iframe class="scrolling-iframe" src="https://www.wikipedia.org/" frameborder="1"></iframe>
<iframe class="scrolling-iframe no-scroll" src="https://www.wikipedia.org/" frameborder="1"></iframe>
</div>
There used to be a scrolling attribute, but it is deprecated in html5. try this:
iframe {
overflow: hidden;
}
Don't forget to set your width and height somewhere!
If you wanted to try the iframe scrolling attribute, you could like this:
<iframe src="blah.html" width="200" height="200" scrolling="no"></iframe>
See working example here:
http://jsfiddle.net/4dt4zhwt/1/
I had horizontal-scrolling disabled like so:
html, body {
overflow-x: hidden
}
On a page with an iframe, if I tried to scroll the page vertically by touching and moving the iframe on Safari for iPad or iPhone, I couldn't.
This fixed it for me:
* {
-webkit-overflow-scrolling: touch
}
I don't know if you have found a way around this, but I had the same problem where all iframes (twitter, facebook and youtube) in my site was preventing the page itself from scrolling. After a lot of debugging and coffee, I found it, in my case at least, It was down to an overflow-x: hidden hidden I had set on a form element 4/5 parents up. Removing the overflow property fixed the issue for me, Hope it works for you!
I had an iframe in full width (with a Vimeo video inside) and it prevents the page scrolling.
Here is how I solved this issue :
<div class="video">
<iframe src="path-to-video"></iframe>
</div>
.video iframe {
pointer-events: none;
}
More info on this css property : https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events