I'm trying to build a simple responsive site.
For the most part everything is working. But as soon as I start to shrink the site, the YouTube video gets bumped onto the next row. Is there a way to fix this so it stays aligned with the ad to the left?
Here is a link to the demo site:
http://ctrice.ca/test/rwd/
This is the css I'm using.
#ad{ width:100%; max-width:288px; min-height:330px; margin-right:2%; float:left; }
#trailer{ width:100%; max-width:540px; min-height:330px; position:relative; float:left; }
#trailer iframe,
#trailer object,
#trailer embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This is the HTML code:
<div id="ad"><img src="img/ad.jpg" alt="ad" /></div>
<div id="trailer">
<iframe width="460" height="315" src="http://www.youtube.com/embed/C4uOSz1Z9GM" frameborder="0" allowfullscreen></iframe>
</div>
The problem will lie with the iframe. I wish I could remember all the gory details but it's best to get that lesson from an expert by Googling for Scott Jehl and "responsive and responsible" videos and any articles you can find (of which there are many). His specific problem was with ads delivered to the Boston Globe via iframes. Your problem may be that the video is in an iframe.
I know we're not to give answers as "Google for it" but my answer points to the iframe and the many points made by Jiehl are best left to him.
This code seems to work for me. The percentage in CSS is found when you divide the height by the width of your video.
(HTML)
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="315" src="YourVideoURL" frameborder="0" allowfullscreen></iframe>
</div>
(CSS)
`/*/V I D E O * W R A P P E R/*/
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.videoWrapper iframe,
.videoWrapper embed,
.videoWrapper object {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}`
Hope it works for you good luck!
Related
Like the title states is it possible to use to show 100% of another website on my site? Without any of the contents from my own site showing?
I tried using a code like this,
<iframe src="google.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
But my own site is still showing up below the contents when it runs out. Please help thanks.
You may try with these css codes.
body {
margin: 0;
padding: 0;
}
iframe {
position: absolute;
width: 100%;
height: 100%;
border: 0;
}
<iframe src="https://www.premierleague.com"></iframe>
i'm struggling to get a responsive iframe but so far nothing..
I use the following css and html.thanks in advance.
.testme_container {
position: relative;
height: 0;
overflow: hidden;
}
.testme_container-16x9 {
padding-bottom: 56.25%;
}
.testme_container-4x3 {
padding-bottom: 75%;
}
.testme_container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<div class="testme_container">
<iframe src="http://www.gmail.com" allowfullscreen></iframe>
</div>
Could you try to explain in detail what you want to achieve?
I tried your code and judging by the names of your CSS classes (16x9, 4x3) it seems to work fine, however, you will have to use a different URL to test it:
<div class="testme_container testme_container-4x3">
<iframe src="http://www.w3schools.com/" allowfullscreen></iframe>
</div>
DEMO
The reason www.gmail.com doesn't show up is, because Google doesn't allow it to be displayed in an iframe. If you look at the jsfiddle you can see, I did not change anything about your code but the link and I added the class "testme_container-4x3".
This JavaScript function relies on jQuery to make all iframes on the page responsive. It handles video embeds to preserve their aspect ratio without extra vertical or horizontal margin but you need to determine the aspect ratio you'll be using in your embedded video.
https://gist.github.com/dylanvalade/b2ba4eaa99ae7968cfd8
You can actually do this in native javascript without any need to rely on jQuery or other framework/library. Responsive Iframes would work perfectly for this.
In my html page, I have a header and its position is fixed. In the contant or body of the page I have an Iframe to display a youtube video and other DIV tabs. In other browsers like chrome, Morzilla etc all the contants schrolls behind the header and works fine!!.
But In IE (IE 11), only the youtube video in Iframe scrolls over/aboves the header. How can I make it to scroll behind the header in IE.
here is the code
css
#header {
position: fixed;
background-color: #ffffff;
margin-top: -18px;
z-index: 10;
width: 100%;
}
iframe {
background-color:transparent !important;
z-index: -1;
}
html (php page)
<div style="text-align:center;padding:20px;font-size:16px ; z-index: -1;">
<div>
<iframe " width="320" height="247" src="http://www.youtube.com/********" frameborder="0" allowfullscreen></iframe>
</div>
</div>
http://jsfiddle.net/Rq25Q/
try adding ?wmode=opaque at the end of src attribute of iframe
like <iframe " width="320" height="247" src="http://www.youtube.com/abcd?wmode=opaque" frameborder="0" allowfullscreen></iframe>
I trying to reproduce what you want, but I can't find any error in IE 11.
.header {
position: fixed;
}
Here is a jsfiddle for this: http://jsfiddle.net/nJBy9/
All the contents scrolls behind the header and works well.
Can you explain what is your problem?
You need to ensure that the z-index of the iframe is less than the z-index of the header:
.header {
z-index: 10;
}
iframe {
z-index: 1
}
I'm trying to embed a vine video in a wordpress page and am having a hard time getting the video to scale when viewed on an iPhone. I haven't really had any luck adding things to the embed code html wise. But that's probably because I'm a total noob.
Here is the code I'd like to have dynamically scale.
<iframe class="vine-embed" src="https://vine.co/v/bVuUeLXBHBF/embed/simple"
width="600" height="600" frameborder="0"></iframe><script async
src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>
I think you forgot to post the code?
<iframe src="https://vine.co/v/bnrtW52x1uJ/card?mute=1"
width="100%" height="100%" frameborder="0"></iframe>
If that is vine embed code, can you just change width/height to percentages if you are currently using pixels?
I was just looking today for an answer..and this worked for me:
Style
.embed-container {
position: relative;
padding-bottom: 100%;
height: 0;
overflow: hidden;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class='embed-container'>
<iframe width='100%' src='https://vine.co/v/h9eAhKWzJlv/embed/simple' frameborder='0' scrolling='no' allowtransparency='true'></iframe>
<script async src='//platform.vine.co/static/scripts/embed.js' charset='utf-8'></script>
</div>
Had this same infuriating problem, when my site needed to be responsive. Fiddling with width and height attributes and the styling did nothing for me. I ended up writing a function to calculate the width and height I needed on page load, then writing the iframe into the innerHTML of the contain div element:
function setVineDimensions () {
var dimension = document.getElementById('vine_container').offsetWidth;
document.getElementById('vine_container').innerHTML = '<iframe class="vine-embed" src="https://vine.co/v/XXXXXXXX/embed/simple" width="' + dimension + '" height="' + dimension + '" frameborder="0"></iframe>';
}
setVineDimensions();
Note that the above is just the iframe. When you grab the embed code from Vine there is a script as well. Pop that up in the header and you're good to go.
This solution works only on a page load/refresh. If you're prone to resizing your browser window it won't change.
I am using an iframe and in the iframe I am loading a dynamic image. I want to use that image as a link to the respective article. Actually this is a news site.
I already have used many stuffs like:
<iframe src="dynamic url"></iframe>
does work with IE but not with safari and FF.
and
some tweets like
div.iframe-link {
position: relative;
}
a.iframe-link1 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
code:
<div class="iframe-link">
<iframe src="file" width="90px" height="60px" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" allowtransparency="true" noscaling="true">
</iframe>
</div>
worked in FF and Safari not in IE7,8.
SO can anybody suggest what to do..
any help would be appreciated.
The Iframe is loading a dynamic address of image like::::
<div class="news_img01">
<div onclick="window.open('URL','_self')" style="cursor: pointer;"><br>
<iframe scrolling="no" height="60px" frameborder="0" width="90px" noscaling="true" allowtransparency="true" marginwidth="0" marginheight="0" src="thumbnails/1188.gif">
</iframe>
</div>
</div>
so i cant add tag inside but already wrapped tag inside . it worked for IE but not for others like FF, Safari..
You could create a overlay to make the area over a iframe clickable. This worked for me.
<div style="position:relative;">
<iframe src="somepage.html" width="500" height="500" />
</div>
I found this code snippet from this thread here:
https://forums.digitalpoint.com/threads/how-do-i-make-this-iframe-clickable.2320741/
According to your earlier comments, you were using the iframe in order to crop an image of unknown size to a 60 by 90 pixel box. To do this, use the overflow:hidden css attribute on the a tag, which slices off any content not fitting within the border-box.
<div class="news_img01">
<a href="URL"
style="display: block; width:90px; height:60px; overflow:hidden;">
<img src="thumbnails/1188.gif" />
</a>
</div>
Why don't you enclose <iframe> inside a <div> and add an onClick event on the containing <div> to navigate the user to the desired page?
<div onClick=""> <!-- Or just bind 'click' event with a handler function -->
<iframe ...></iframe>
</div>
By adding the following css rule, it will work as if the iframe were a clickable link.
div {
cursor: pointer
}
iframe {
pointer-events: none; // This is needed to make sure the iframe is not interactive
}
Set css property pointer-events to none on iframe tag.
a {
display : block; /* or inline-block */
}
a iframe {
pointer-events : none;
}
<a href="https://stackoverflow.com/questions/3317917/use-iframe-as-a-link">
<iframe src="https://www.africau.edu/images/default/sample.pdf"></iframe>
</a>
If the iframe is loading an HTML page, just put your <a> tags in the source of that.
If it is just loading an image, why are you not using an <img> tag?
I would recommend using jQuery to select the image element in that iframe and wrap it with <a> tag so it's clickable.
I believe it's possible to attach an onHTMLReady listener to the document inside the iframe. Then wait for the iframe to load and then make the image clickable
$(frames[0].document).ready(function(){ /*find and wrap with a-tag goes here*/ });
I have the same problem and I solved it with this code:
div.iframe-link {
position: relative;
float: left;
width: 960px;
height: 30px;
}
a.iframe-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #ffffff;
opacity: 0.1;
filter:Alpha(opacity=10);
}
For me,it works for all browsers and IE8 as well.
Hope it helps :)
I faced such type of problem and solved by this:
a.iframe-link1 {
position:absolute;
top:0;
left:0;
display:inline-block;
width:90px;
height:60px;
z-index:5;
}