I have embedded a vimeo within a div that is the full-width of the viewport. The video worked perfectly for a couple of days but now the play button (and all other buttons) are completely non-responsive.
I've tried messing around with the z-index but that doesn't work.
<div class="full-screen-vid">
<iframe src="https://player.vimeo.com/video/192013765" width="100%" height="700" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
.full-screen-vid {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 90px;
z-index: -1;
}
There is a strange message I've been getting in the console which I looked up and tried to fix but I don't think it is the problem (or the whole problem) because if I remove the video from the full-screen-vid, it works correctly.
Console message:
Refused to load the script'data:application/javascript;base64,KGZ1bmN0aW9xxxxIGZ1…xxxxxxxxxxxx='
because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'
https://f.vimeocdn.com https://ssl.google-analytics.com https://js-agent.newrelic.com https://bam.nr-data.net https://f.vimeocdn.com".
Load the <iframe> stand-alone, adding the full-screen-vid class to it, should work.
Related
I have the premade widget, and I am trying to position it on lower right hand corner with a fixed position so it stays there regardless of scrolling. I for the love of me cannot get it to go where I want it to, it just stays under the content. Please help.
<iframe src="https://discord.com/widget?id=769639393924481044&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
I have tried using a div as done on w3 schools, again unable to make it work.
<div.fixed><iframe src="https://discord.com/widget?id=769639393924481044&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div.fixed>
<div.fixed> does not exist. You have to add a class. The name of the class can be what ever you like. In CSS you will then need the . to access the class. Something like this will work
.fix-me {
position: fixed;
bottom: 20px;
right: 20px;
background-color: orange;
width: 100px;
height: 100px;
}
<div class="fix-me">
<div>what ever content</div>
</div>
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.
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!
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 embed iframe element in my HTML page:
<iframe src="applet.html" frameborder="0" style="width: 600px; height: 600px;"></iframe>
applet.html looks like this:
<html>
<head>
</head>
<body>
<applet code="ClockApplet.class" width="100%" height="100%">
</applet>
</body>
</html>
The problem is: how to display a div element (with position: absolute) over a Java applet which is inside iframe.
I tried to use another iframe element:
<html>
<head>
</head>
<body>
<iframe src="applet.html" frameborder="0" style="width: 600px; height: 600px;"></iframe>
<iframe src="javascript:false;" frameborder="0" style="position: absolute; top: 10px; left: 10px; width: 150px; height: 150px; z-index: 99"></iframe>
<div style="position: absolute; top: 10px; left: 10px; background-color: gray; height: 150px; width: 150px; z-index: 100">Hello World</div>
</body>
</html>
Works fine in IE, Firefox but not in Chrome.
I found an article that seems to provide a solution, so I'll not claim the credit for coming up with it:
http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/
From the article:
The solution is to have a third Iframe
C within Iframe A. Iframe C has a
z-index within Iframe A that is higher
than the z-index of the Applet. It is
positioned so that it's rectangle as
considered by the top page is
identical to that of the Iframe B
overlay.
I pasted second IFrame code from your main page into applet.html like so:
<iframe src="javascript:false;" frameborder="0" style="position: absolute; top: 10px; left: 10px; width: 150px; height: 150px; z-index: 1"></iframe>
<applet code="ClockApplet.class" width="100%" height="100%">
</applet>
And it seemed to do the trick in chrome.
I did get a frame border but i'm guessing this is fixable. Give it a go.
This problem is partly solved with latest updates, at least on MacOSX:
I tested DIVs with fancy CSS effects like opacity, shadows and round corner over an applet, it is working well in Safari, Firefox 11 and Chrome 19: no issue in the composition, no glitches.. no iframes!
It is still broken on Ubuntu, though. Really frustrating. I don't know for Windows?