I'm using the FancyBox plugin for some of my site's images. On one of my pages, I also have the embedded iFrame code from YouTube to place a video on the page.
On this same page is a thumbnail that, when clicked, FancyBoxes the image. However, the embedded YouTube video still lays over the FancyBox image. I did a bit of z-index experimenting and still no luck.
Does an iFrame have seniority over all elements in a page even with z-index set, etc.?
Add wmode=transparent as param.
Html solution
<iframe title="YouTube video player"
width="480" height="390"
src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent"
frameborder="0"
>
jQuery solution:
$(document).ready(function () {
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"?wmode=transparent");
});
});
Source http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix
In a word, yes. However Youtube videos are Flash. Flash also has seniority over the Z-order. It will overlay whether it is in an IFRAME or not.
IFRAME and Flash are "heavyweight" objects. They have their own Window Manager objects (HWND in Windows), so they are either in front of other heavyweight objects or behind them.
div, span, etc are "lightweight". That is they are drawn objects, drawn onto the Body (which is a heavyweight object), and managed by the browser, not the window manager.
As far as the operating system window manager is concerned, they are just pretty pictures drawn by the browser. That's why they cannot overlay "real" objects (or what the window manager thinks of as real).
They have to be lightweight because they would rapidly exhaust the window manager if every DIV and SPAN and A had to reserve OS resources.
If you want the Flash applet to be rendered according to the same z-index rules of any other HTML element, then you need to set the WMODE attribute for the included flash.
See:
http://www.communitymx.com/content/article.cfm?cid=E5141
differences between using wmode="transparent", "opaque", or "window" for an embedded object on a webpage
Is very simple, just add this parameters to your iframe url and thats it:
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">
Good luck!
Hmm, the problem here is that I don't have control over the flash elements. I'm basically just pulling the embedded iFrame HTML from the youtube site which only contains the tags. So I can't set the WMODE attribute.
Late answer but: yes you can. Just tack ?wmode=opaque onto the yt url.
<iframe src="http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque".............
To get this to work in IE (at least 7 and 8) you must add this:
<param name="wmode" value="transparent" />
I don't believe there is a way to append this to the iframe URL so your content needs to have this, probably between object tags.
Related
I'm trying to embed vimeo videos as iframes. I'm using the following code:
<iframe width="1140" height="570" src="https://player.vimeo.com/video/553469759?autoplay=1&dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
It works fine when I paste it in a codepen or try it in firefox. It doesn't work in chrome for me though. When I inspect the iframe's HTML, I can see that vimeo adds a class no-fullscreen-support, it also added these classes though:
js-player-fullscreen
with-fullscreen
Figured it out on my end. It was due to the Permissions-Policy being set by Nginx in the header. In my instance of Nginx, it was originally set to this:
add_header Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()";
The culprit in this case was fullscreen=(self) -- it was telling Chrome that unless the code originated from the site, it shouldn't allow full screen. As Vimeo's iframe is being loaded from player.vimeo.com, Chrome saw that as a third party and wouldn't allow it. Removing that from the Permissions-Policy so it looked like this:
add_header Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),payment=()";
Resolved the problem. The button is showing fine now.
For those using Apache, it'd probably look like this:
Header always set Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()"
The same principle applies, just remove fullscreen=(self).
You might also see it mentioned as Feature Policy, same thing, it's just called Permissions Policy now.
You can learn more about Permissions Policy here: https://github.com/w3c/webappsec-permissions-policy/blob/main/permissions-policy-explainer.md
From Vimeo Help Center:
The fullscreen button will be hidden from the player in scenarios where fullscreen mode cannot be activated. Here are some common causes:
First and foremost, check the Embed tab. Make sure the fullscreen button is toggled on under the Controls section
The iframe embed code is missing the fullscreen attributes: "mozallowfullscreen,""webkitallowfullscreen," and "allowfullscreen." If you’re pasting your embed code into another application, make sure these values are being retained.
The player iframe is contained within another iframe that is missing the fullscreen attributes. Browsers do not allow iframes to enter fullscreen if they are contained within other iframes without these fullscreen attributes. - Try inserting the player outside of the container iframe or adding "mozallowfullscreen," "webkitallowfullscreen," and "allowfullscreen" to the container iframe.
The iframe is contained within a frame. Frame elements cannot enter fullscreen, and neither can any iframes inside of them. We recommend removing all frame tags from your page’s source code.
If you're not sure if the above cases apply, please contact us, and we’ll investigate further. Be sure to include a link to the page where the video is embedded, so we can take a closer look at your page's source code.
You should add these tags to the element:
webkitallowfullscreen mozallowfullscreen allowfullscreen
what if you just download the video and upload it somewhere like github?
And then use the tag to embed the video?
<video src="protocol://someurl.domain/path" muted autoplay width="1140" height="570"></video>
If vimeo doesn't allow downloading you can always use third-party tools like savethevideo.com
I have a flash object I need to embed on my tumblr blog (Billy's audio player) and the embed works fine, except that I need to click a white play button before the object works:
(this is in Chrome; there is a similar play button on Edge)
However, other websites don't have this play button over the widget, including the widget's own webpage and the bottom left of this blog.
This is the embed code, taken directly from the Billy's audio player webpage (with added newlines for readability):
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://www.sheepproductions.com/sammy.mp3&t0=Sammy&total=1"
quality="high" wmode="transparent" width="200" height="10" name="billy"
align="middle" type="application/x-shockwave-flash" title="Adobe Flash Player">
Is there something I can add to make the flash object run automatically? I doubt it's a browser issue, as it works on some other webpages, and other viewers also see the white play button.
However, other websites don't have this play button... including the
widget's own webpage.
SWF and HTML must be in the same exact location (ie: web folder).
If SWF url is : http://www.sheepproductions.com/billy/billy.swf
then HTML must be : http://www.sheepproductions.com/billy/pageWithSWFembeded.html
This issue is caused by the small width/height of your SWF. Browsers assume it is a Flash advert banner and do not auto-load it. It can be fixed by either increasing SWF display size or by putting the small SWF in same location as HTML page that loads the SWF.
Also consider using HTML5 audio tag to guarantee playback of website audio even on mobile devices (they don't run Flash content within default browsers).
using the two methods to embed videos from youtube, the iframe:
<iframe width="400" height="300" src="http://www.youtube.com/embed/2D_AU8-2QWY?rel=0" frameborder="0" allowfullscreen></iframe>
and the old one:
<object width="400" height="300"><param name="movie" value="http://www.youtube.com/v/RNclwz9B_GQ?version=3&hl=it_IT&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RNclwz9B_GQ?version=3&hl=it_IT&rel=0" type="application/x-shockwave-flash" width="400" height="300" allowscriptaccess="always" allowfullscreen="true"></embed></object>
Im always gettin an ugly overlapping effect on my divs, like this:
So the question is how to avoid that? Thanks!
Try z-index in css to order your div's this way you can pick what go's on top
https://developer.mozilla.org/en/CSS/z-index
To add on 1ftw1's answer; to allow setting z-index on flash content you need to include the wmode param
From Adobe's site:
wmode - Possible values: window, direct, opaque, transparent, gpu. Sets the Window Mode property of the Flash movie for transparency, layering, positioning, and rendering in the browser. If this attribute is omitted, the default value is "window". For more information, see Using Window Mode (wmode) values below.
window - The SWF content plays in its own rectangle ("window") on a web page. The browser will determinehow the SWF content is layered against other HTML elements. With this value, you cannot explicitly specify if SWF content will appear above or below other HTML elements on the page.
direct - Use direct to path rendering. This bypasses compositing in the screen buffer and renders the SWF content directly to the screen. This wmode value is recommended to provide the best performance for content playback and enables hardware accelerated presentation of SWF content that uses Stage Video or Stage 3D.
opaque - The SWF content is layered together with other HTML elements on the page. The SWF is opaque and will hide everything layered behind it on the page. This option will reduce playback perfomance compared to wmode=window or wmode=direct.
transparent - The SWF content is layered together with other HTML elements on the page. The SWF background color (Stage color) is transparent, and HTML elements beneath the SWF will be visible through any transparent areas of the SWF, with alpha blending. This option will reduce playback performance compared to wmode=window or wmode=direct.
gpu - Use additional hardware acceleration on some internet connected TVs and mobile devices. In contrast to other wmode values, pixel fidelity for display list graphics is not guaranteed. Otherwise, this value is similar to wmode=direct.
I have a website that has a huge background image. I need to put a flash player at the top of the website, and I just realized that each page they click on is a new page, and thus restarts the Flash player. So I would like to put that flash player in an iframe so it will continue to play throughout the user surfing.
But my issue is will the iframe cover the background image and not be underneath? Or will the background image of the page (not iframe) go nicely underneath the iframe and no one will be the wiser of my methods? Any help would be greatly appreciated.
Firstly what you want to do is put your individual pages contents into an iframe (not the flash video) as this is what you want to update. You want the flash to be on the actual parent page so it always remains the same. (or put both in seperate iframes and only update the content iframe).
In regards to your question about the iframes background you can make it transparent so that the background is still visible through it.
To do this set the ALLOWTRANSPARENCY property to true on your iframe e.g.
<iframe width="100%" height="500px" name="content" src="home.html" frameborder=0 allowtransparency="true"></iframe>
And then in the pages which are going to be contained in the iframe set the body's background to be transparent:
<body style="background-color:transparent">
Iframes are bad, and take with them all the shitty stuff about frames (google "why frames are bad" if you want some reading).
What you should be looking at is some AJAX-techniques. JavaScript frameworks like Dojo and jQuery have lots of functionality you could check out. This will enable users to do things like vote, add to favourites or comment while the movie is playing - pretty much like Youtube.
It all depends a little on what you've got running underneath your HTML-pages though. Could you provide some more information about that?
I have a html div layered on top of an interactive flash movie, but when the mouse moves over the div, it can't interact with the flash (the view changes as the mouse moves or is clicked). Is there a way to have the flash recieve the mouse movements and clicks but leaving the html visible?
I can't modify the flash SWF file.
Edit: To make it clearer, this is an layer of information sitting on top of Google Street View (flash), the trouble is that I can't move the street view around where the layer overlaps.
Try something like this:
<object>
<param name="wmode" value="transparent" />
<embed src="example.swf" wmode="transparent"></embed>
</object>
The main things to note are the <param /> tag with the transparent attribute, and the wmode="transparent" in the embed tag. You'll also need to run the following javascript code to make this work across all browsers:
theObjects = document.getElementsByTagName("object");
for (var i = 0; i < theObjects.length; i++) {
theObjects[i].outerHTML = theObjects[i].outerHTML;
}
This code should be run when the document is loaded. The site I got this code from claims that it must be run from an external file in order to work (although I haven't tested that).
I got this answer from here, where you can get more detail and a working example:
http://www.cssplay.co.uk/menus/flyout_flash.html
I believe the short answer is: No.
Sorry.
However, If you had complete control over how the Flash object is authored - you might be able to expose a public API to the javascript - allowing it to "manually" forward live mouse-coordinate, and mouse-button information into the flash, as you operate the mouse on top of the HTML overlay.
It might be worth checking, if Google's street-view Flash object exposes a public javascript API that might allow you to take some control of the flash - based on mouse-events picked up by your HTML overlay.
Expect the skies to fall, if you try this. :-)
should be aware that wmode=transparent will kill use of scroll wheel in firefox. this is true even in FP10