Do you know how to use the flash wmode attribute in web pages?

When doing web development, you may encounter the situation where flash blocks elements in the page. No matter how you set the flash container and layer depth (z-index), it will not help. The existing solution is to add the "wmode" attribute to the embed or object tag that inserts the flash and set it to wmode="transparent" or "opaque". But what is the meaning of the wmode attribute? Why can it be solved in the flash tag?
<param name=”wmode” value="xxxx">
"Window" plays the application in its own rectangular window on the Web page, and it always stays on top.
"Opaque" displays the content that follows it on the page.
"Transparent" causes the background of the HTML page to show through any transparent parts of the application and may degrade animation performance.
Note: Both Opaque and Transparent interact with HTML layers, allowing layers above the SWF file to obscure the application. The difference between the two options is that "Transparent" allows transparency, so if a portion of the SWF file is transparent, the HTML layer below the SWF file can show through that portion, while "opaque" does not.
That is, if FLASH covers the DIV layer, you must change the wmode attribute to "Transparent"
When doing web development, you may encounter the situation where flash blocks elements in the page. No matter how you set the flash container and the depth of the layer (z-index), it will not help. The existing solution is to add the "wmode" attribute to the embed or object tag that inserts the flash and set it to wmode="transparent" or "opaque". But what is the meaning of the wmode attribute and why can it solve this problem?
window mode (wmode)
There are three wmode modes. Here's the official statement from Macromedia: Window: Use the Window value to play a Flash Player movie in its own rectangular window on a web page. This is the default value for wmode and it works the way the classic Flash Player works. This normally provides the fastest animation performance. Opaque: By using the Opaque value you can use JavaScript to move or resize movies that don't need a transparent background. Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through. Transparent: Transparent mode allows the background of the HTML page, or the DHTML layer underneath the Flash movie or layer, to show through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page. Animation performance might be slower when you use this value.
Window mode <br />The default display mode. In this mode, Flash Player has its own window handle, which means that the Flash movie exists in a display instance in Windows and is above the browser core display window, so Flash only appears to be displayed in the browser, but this is also the fastest and most efficient rendering mode of Flash. Since it is independent of the browser's HTML rendering surface, this results in the default display mode flash always covering all DHTML layers that overlap with it.
However, most Apple computer browsers will allow the DHTML layer to be displayed on top of Flash, but when the Flash movie is played, some strange phenomena will occur, such as the DHTML layer will display abnormally as if a piece of it was scraped off by Flash.
Opaque mode <br />This is a windowless mode. In this case, the flash player does not have its own window handle, which requires the browser to tell the flash player when and where to draw on the browser's rendering surface. At this time, the flash movie will not be higher than the browser HTML rendering surface but on the same page as other elements, so you can use the z-index value to control whether the DHTML element covers the flash or is covered.
Transparent mode <br />Transparent mode, in this mode, Flash Player will set the alpha value of the stage background color to 0 and will only draw the objects that are actually visible on the stage. You can also use z-index to control the depth value of the flash movie. However, unlike Opaque mode, doing so will reduce the playback effect of the flash movie, and setting wmode="opaque" or "transparent" in Flash Player versions before 9.0.115 will cause the full-screen mode to fail.
After understanding the implementation and significance of various modes, you can choose to set the value of the wmode attribute according to the specific situation in future development.

<<: Vue form input binding v-model

>>: Example code of setting label style using CSS selector