Why is `backface-visibility:hidden` not working on iframe? - 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;?

Related

iframe inner scrollbar is stuck

I have a page that has an iframe in it. for styling, I'm using tailwind-css. Now I have two scrollbars - iframe inner scroll and browser'scroll, I want to hide the inner scrollbar of the iframe and scroll with the browser scrollbar. I tried to use scrolling="no" and the inner scrollbar is removed but the browser scroll is stuck and the iframe is not fully displayed
<div className="h-full overflow-scroll>
<iframe
src={url}
frameBorder="0"
width="100%"
scrollbar="no">
</iframe>
</div>
Do you have any idea how can I do this? Thank you in advance
set the height to fit the content and disable the scrollbar
<div className="h-full overflow-scroll>
<iframe
src={url}
frameBorder="0"
width="100%"
height="640px"
scrollbar="no">
</iframe>
</div>

Positioning iframe

So I have this iframe code that centers iframe content. It is working, but it stays on the top of the page, how could get it more down?
<h3 style="text-align:center;" >
<iframe src="http://88.90.5.113:12/customexportfile.htm" width="200"
height="100" frameBorder="0" ></iframe>
</h3>
Have you tried something like this: margin-top: 20px;?

Remove info window from an embedded Google map

I'm trying to hide info window from Google embedded map. I was searching for solution, but can't find it anywhere.I want to hide info window and leave link for bigger map.
Link to map: http://dev01-www.erisata.lt/en.html#contacts
Any solutions for this?
You can't, but you can do a workaround for your case, by adding a new div with absolute position to hide the google map text content, replace your map-container div by :
<div class="map-container">
<section style="background:#75716a; background: #e5e5e5;padding: 0;position:relative;">
<iframe scrolling="no" width="100%" height="400" frameborder="0" style="border:0; -webkit-filter: grayscale(100%); filter: grayscale(100%);" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6522.283005371661!2d25.278750538590636!3d54.69246783787969!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46dd941c3397b6eb%3A0x20df28c924221cdd!2zxaBlaW15bmnFoWtpxbMgZy4gMjMsIFZpbG5pdXMgMDkyMDA!5e0!3m2!1slt!2slt!4v1479197857183" allowfullscreen="" class=""></iframe>
<div width="100%" style="left:0;right:0;position: absolute;bottom: 0px;background: #e5e5e5;"> </div>
</section>
</div>

How to add scrolling tollbar to the iframe with pdf

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

Embedded Youtube player not responding in Chrome

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.