iframe tag Flash Masking page element problem--wmode parameter

In the recent project process, encountered a variety of small problems, so intends to use the blog park to record the solution of the problem.

The background to this question is this: The project is a ANGULARJS framework that uses the Wangeditor Rich Text Editor plugin on a page (GitHub address: https://github.com/wangfupeng1988/ Wangeditor), by configuring some parameters, the editor interface is as follows:

Among them, the video function, I modified a bit, the original editor can only upload network video, I added the ability to upload local video (pull away. Ignore me ... ), inserting network video is to copy the IFRAME tag from the video sharing link on the major online video websites, then submit it, and after the submission is completed, the page will load a separate webpage of the IFRAME tag and display the video. Copy a Youku Video: <iframe height=498 width=510 src= ' http://player.youku.com/embed/XMTg5Njg2Mjk4NA== ' frameborder=0 ' allowFullScreen ' ></iframe> After the insert is complete, the following:

The following question came, I need to save the editor's content, click on the Save button below, a modal box will appear, to confirm the user prompt, in addition to the normal Google browser, the rest of the browser (ie Firefox version) shot box appeared in a Flash, Meng, the frame of the Z-index set is 1050 Ah, In all CSS is the maximum value, but was inserted in the IFRAME tag to cover!!!

Therefore, as a new front-end, the Internet to check various methods, the most to find a solution is to modify the IFRAME position and Z-index, but after testing, failed to be resolved. Finally, an effective solution is as follows:

Add after the SRC value of the iframe tag? Wmode=transparent

Each time you insert a network video, modify the IFRAME tag, and then transform the Wangeditor.js code, such as the next, the problem is solved ~

// handling iframe tags, resolving iframe video Overlay popup issues

var url = $link. attr ("src"); $link. attr (' src ', url+ "? Wmode=transparent");

Problem solved, then what is Wmode?

Wmode is the window mode, which has a total of three:

Window mode , the display mode by default, in which Flash Player has its own window handle, which means that the Flash movie is a display instance that exists in Windows and is above the browser core display window. So flash just seems to appear in the browser, but this is also the fastest and most efficient flash rendering mode. Since he is a browser-independent HTML rendering surface, this results in the default display in which Flash will always obscure all the DHTML layers where the location coincides with him.

opaque mode , which is a windowless mode in which Flash Player does not have its own window handle, requires the browser to tell Flash Player when and where to draw on the render surface of the browser. In this case, the Flash movie will not be higher than the browser HTML rendering surface but with other elements on the same page, so you can use the Z-index value to control the DHTML element is obscured flash or obscured.

transparent mode , transparent mode, in which Flash Player will have the background color alpha value of stage 0 and will only draw objects that are actually visible on the stage. You can also use Z-index to control the depth value of the Flash movie, but unlike opaque mode, this can slow down the playback of the Flash movie, and the Flash Player version settings before 9.0.115 wmode= "opaque" or " Transparent "will cause full-screen mode to fail.

Reference Link: http://codego.net/410900/

iframe tag Flash Masking page element problem--wmode parameter