I'm using CSS to stylize a website and have an embedded youtube clip inside of several DIVs like so:
<body>
<div id="wrap">
<div id="outer">
<img src="images/sidebar.png"/ class="sidepic">
<div id="look">
<iframe width="500px" class="youtube-player" type="text/html" height="280px" src="http://www.youtube.com/embed/J-U9aYeLvX0?wmode=opaque&feature=player_profilepage&showinfo=0" frameborder="0" allowfullscreen seamless></iframe>
<img src="images/content-01.png" class="bigpic" />
</div>
</div>
</div>
This works fine in Internet Explorer, but doesn't work in Chrome. The video doesn't detect any hover or clicking, as though it's a static image or hidden.
I've tried to use the ?wmode=opaque / transparent tags recommended in other threads on this site, but it doesn't seem to work. Removing the iframe from the DIV tags allows the video to play, but distorts the rest of the page.
Related
I am trying to embed an Adobe Portfolio into an iframe without much luck. I need to include both images (which appear to have a JS dependency) and links to open in a new window.
The iframe"standbox" directive is not behaving.
I have tried many permutations of other directives and narrowed it down to "allow-scripts" and "allow-popups" that work separately but not together.
I suspect this is something to do with Adobe Portfolio itself but cannot figure out why!?
Please note - code snippet doesn't run fully as expected within stack overflow site - probably because they have their own standbox directive!
<html>
<head></head>
<body>
<style>
.fl {
width: 300px;
float: left
}
</style>
<div class="fl">
<h1>Images working</h1>
<h3>sandbox="allow-scripts" <br/> (script appear to be needed for images)</h3>
<iframe src="https://picturelinktest.myportfolio.com" sandbox="allow-scripts" height="350" width="200" ></iframe>
</div>
<div class="fl">
<h1>Link working </h1>
<h3>sandbox="allow-popups" <br/> works locally but seems not to work in this tool!?!?</h3>
<iframe src="https://picturelinktest.myportfolio.com" sandbox="allow-popups" height="350" width="200"></iframe>
</div>
<div class="fl">
<h1>Not working when both standbox directives are defined</h1>
<h3>sandbox="allow-scripts allow-popups"</h3>
<iframe src="https://picturelinktest.myportfolio.com" sandbox="allow-scripts allow-popups" height="350" width="200" ></iframe>
</div>
</body>
</html>
The backface-visibility doesnt hide the iframe backface
I created a flip box with iframe element on both side, when flip, the iframe on the front side will overlay the iframe on back side, apply backface-visibility: hidden does not hide it backface, although it shoud be:
Codepen link
<div class="flip3D">
<div class="front">
<iframe id ="frame" width="auto" height="auto" src="https://www.youtube.com/embed/wZZ7oFKsKzY?enablejsapi=1" frameborder="0">
</iframe>
</div>
<div class="end">
<iframe width="80%" height="80%" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0"></iframe>
</div>
</div>
I can fix this by making the front side iframe visibility: hidden on hover. But
Question : Why backface-visibility is not working on iframe ?
You were missing transform-style:preserve-3d;?
I have a modal with pdf:
<div ng-if="$root.isie11">
<iframe src="file.pdf" class="pdf">
</iframe>
</div>
<div ng-if="!$root.isie11">
<object data="file.pdf"
type='application/pdf' class="pdf" >
</object>
</div>
As you can see if browser is IE I use iframes in other cases object. In object the pdf comes with scrollbar. Althought its only 1 page its need to be scrollable because of a modal size. In Iframe there is no scrollBar.
I tried adding : scrolling: yes with now effects
I'm trying to put a blurred overlay layer over a video.
I roughly recreated the effect in a jsFiddle:
http://jsfiddle.net/zswcctc7/1/
this is the situation more or less.
<div class="overlay-wrapper">
<div class="video">
<iframe width="560" height="315" src="//www.youtube.com/embed/vdCGnuccRv0?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="overlay"></div>
</div>
So what i would like is instead of the white layer have a blurred layer, iOS style-ish. I tried a lot of things like blurjs, but nothing i find seems to work with video's.
I have my HTML as below
<html>
<body>
<div id="d1"
style="height:100px;width:100%;background-color:#CFE;position:fixed;z-index:1000">
</div>
<div id="d2" style="padding-top:110px;z-index:-1000;background-color:#CCE;height:1000px;">
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XZxo7IznQnk" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
Top div (d1) is fixed. while scrolling bottom div(d2) goes behind top div. But youtube video
stay on top.
I want to put it behind top div. Is there a way??
The problem could be that the iframe is holding the flash youtube video on top. It has to do with the z-index of a Flash object.
I've used this solution before with success...
http://manisheriar.com/blog/flash_objects_and_z_index
Put your Flash content into a wrapper div called flash
Add to your object tag
Add wmode="transparent" into the embed tag
Use CSS to set the position and z-index for your div (don't set negative z-index values as it will hide your Flash)
Use this css:
#flash {
position: relative; /*or absolute*/
z-index: 0;
}
Edit: you would have to remove the Iframe. Wich would of bin a good idea in the first place, since iframes suck :p
That's because ActiveX objects tend to sit on top of ALL html elements. You'll have to have to add a "windowless" mode to your
<object>
<param name="wmode" value="window" />
</object>
Here is how I solved it.
<html>
<body>
<div id="d1"
style="height:100px;width:100%;background-color:#CFE;position:fixed;z-index:1000">
</div>
<div id="d2" style="padding-top:110px;z-index:-1000;background-color:#CCE;height:1000px;">
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XZxo7IznQnk?wmode=transparent"
frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
Note ?wmode=transparent" in src of iframe
What I tried when I came across similar situation:
#bridgeDIV
{
position:relative;
}
#riverDIV
{
position:fixed;
overflow-y:scroll;
}
Imagine river flowing under the bridge.