I've tried every combination of properties and attributes I can think of to get this iframe to embed in a WordPress post so that all of it is visible on both mobile and large screens. It seems I need to specify a height to get the whole frame to display, but doing so then stops all the width showing on mobile.
Any help much appreciated.
<div markdown="0" id="island">
<iframe style="width: 100%; border: none" scrolling="no" src="http://devonmathstuition.co.uk/dev/treasure-island/"></iframe>
</div>
You need to create your iframe inside another element (with it's position relative), and place your iframe with an absolute position:
The padding-top: 56.25% is useful for keeping the ratio (16:9) of the iframe.
Working JSfiddle (try resizing the display tab :)).
Html:
<section>
<article id="iframe">
<iframe src="src.html"></iframe>
</article>
</section>
Css:
section{
max-width: 800px;
}
#iframe{
width: 100%;
max-width: 800px;
position: relative;
padding-top: 56.25%;
}
iframe{
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
margin: auto;
display: block;
position: absolute;
}
src: smashingmagazine.com
edit: here's a video of a resizeable iframe :)
edit2: oopps, forgot a section tag
Related
I made a banner list thenk put my website, on desktop there is no problem bu on mobile its cutting the banners.
Mobile view
this is my iframe placement code:
<iframe scrolling="no" width="75%" height="670"src="/html/banners.html"></iframe>
<style>
iframe {
margin: 0 auto;
display: block;
}
#media(min-width:480px) {
iframe {
height:750px !important;
}
</style>
and this is my banner list codes: Banner list code
How can I resolve thisheight issue? can yoou please help me?
Many thanks.
Please refer to this article Using David J Bradshaw's iframe-resizer to solve iframe height and width issues.
You can to add a containing wrapper around the iframe.
<div class="iframe-container">
<iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" allowfullscreen="" frameborder="0">
</iframe>
</div>
Then. you can add css.
.iframe-container{
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.iframe-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
Ive been fiddling with a lot of informationm ive found here to overlay a transparent TV PNG over a youtube video, and have succesfully gotten it to work on desktop. However I cannot get it to align correctly when viewed on mobile devices (which will be primary viewership). Is there a way I can force different CSS values depending on the device used?
#panel {
position: relative;
width: auto;
height: 625px;
overflow: hidden;
}
#panel-tv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('images/tvoverlay.png') no-repeat center;
pointer-events: none;
z-index: 10;
}
#panel-content-overlay {
position: absolute;
top: 80px;
left: 24%;
width: 720px;
height: 405px;
z-index: 9;
background-color: #000;
}
#embed-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
<div id="panel">
<div id="panel-tv"></div>
<div id="panel-content-overlay">
<div id="panel-content">
<div id="embed-container">
<div style="width: 683px; " class="wp-video">
<iframe width="710" height="399" src="https://www.youtube.com/embed/ZI2dbyNn8PI?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
It is live currently at http://nickosteel.com for your reference.
Regards
One problem I could see is that you have the tv image larger than it needs to be, meaning it becomes a bit harder. I would do the following changes.
Container (id="panel")
make this max-width to after your tv image and center it with
margin: 0 auto;
TV image
cut it so it had as much to the left as the right, so the panel width to the right, should be as much "transparent" to the left. That makes it much easier to align
use it as an image (<img />) instead of a background, that way it will become responsive and have it's natural height (and width).
set width width: 100%; (this is for the responsive part)
Video
make it responsive, look at this post for that (note you don't need any of the javascript, just html/css)
center it
with this you are good to go for a responsive solution. It would be a bit easier to give you the changes in css and html, but for that you need to have the tv image at the right size to begin with. Hope this makes sense!
Just an opinion of mine, use classes for styling and id for javascript targets.
I need to remove vertical scrollbar in an iframe. I have tried using overflow: hidden; still not working. Please help.
How it looks now
Code:
#iphone4 {
background-image: url("ipad_new2.png");
background-repeat: no-repeat;
height: 900px;
width: 750px;
margin: auto ;
position: relative;
overflow: hidden;
}
/*Mobile iframe CSS*/
iframe {
height: 700px;
width: 525px;
position: absolute;
top: 68px;
margin: auto ;
left: 61.99px;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="iphone4" >
<iframe src="index_atish.html" seamless="seamless"></iframe>
</div>
</body>
</html>
overflow isn't a solution for HTML5 as the only modern browser which wrongly supports this is Firefox.
A current solution would be to combine the two:
<iframe src="" scrolling="no"></iframe>
iframe { overflow:hidden; }
check This
I think it'll help please check below mentioned link:
<div id="iphone4" >
<iframe src="index_atish.html" seamless="seamless"></iframe>
</div>
/*Mobile iframe CSS*/
iframe {
height: 100%;
width: 100%;
position: absolute;
top: 0;
margin: auto ;
left: 0;
border:none;
}
body{margin:0px;}
https://jsfiddle.net/xnt014a8/2/
You can't really remove vertical scrollbar if you have dynamic content in your iframe using any css property.
You can refer this answer to set height dynamically at load time. If your content inside iframe is constantly changing then you have to use something like MutationObserver and the pass the resize function as an callback defined in the linked answer.
you could try
iframe{scrolling="no"}
So I am using an iFrame in my website to display a video and I put it in a div to allow for resizing on mobile sties and just to make it more responsive etc. However now, if the monitor is small, the content below the iframe is cut off.
Here is the code for the iframe:
<div class="wrapper">
<iframe src="https://player.vimeo.com/video/132695239?badge=0" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<style>
.wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
If anyone can see anything that may cause this behaviour then I would love to know.
Thanks
Edit:
Here is the code for the div that I am trying to scale. The width doesn't change as the page is scaled down and thus the height also does not change.
Any ideas?
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
The issue is that your wrapper div .splash-page .main-wrap is set to position: absolute; and overflow-y: hidden; this doesn't allow the div to grow to fit all your content.
If you change your CSS to include something like this:
.splash-page .main-wrap {
overflow-y: visible;
position: relative;
}
It will allow the div to grow to accommodate all your content.
You also could wrap the whole thing in a media query if you just wanted to target a specific width.
#media all and (min-width: 1001px) {
...
}
Currently you'll also have a duplicating background issue because your using .wsite-background on both a div and your body tag. If you remove this class from your body tag, it should look better.
Your iframe has a fixed with.
Try using width="100%" instead of width="960"
I have responsive background and I want to have a YouTube video over that background(not in full width).
Here I have tried doing it.
http://jsfiddle.net/audetwebdesign/EGgaN/#run
HTML:
<div class="bg-image">
<img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
<iframe width="560" height="315" src="//www.youtube.com/embed/R8wHnwfHscw" frameborder="0" allowfullscreen></iframe>
</div>
CSS:
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.bg-image iframe {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Here's a jsfiddle forked from your fiddle that has the image as the background, as well as a responsive youtube video centered. Making the image have position:absolute takes it out of the normal flow and allows the embedded video to stay on top.
The trick for the responsive video code is to wrap the embedded video in a container with a max width, and then also adding in padding to keep the proper aspect ratio for the video. You then ensure that the iframe, object, and embded elements all fit at 100% of that container's width while also not getting any taller than the native size:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
width: 100%;
max-width: 560px;
margin: 0 auto;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 320px;
}
http://jsfiddle.net/QRkL9/
More about the above code - http://avexdesigns.com/responsive-youtube-embed/
braican is correct, but the 56.25% on the video container will leave lots of padding after your video. Just wrap everything inside another div with a max-height of 320px and overflow:hidden to hide the extra padding;