Member Avatar for bulqr4eto

Hi everyone, I have a simple question. I have an index with background and a video player...I want to change places of the background and the video.

How to make the background to be on top of the video not like now the video to be on top. I just want to make it more realistic because when I put it behind the picture I can cut a square in the picture where the video will be and the flames will be more realistic. My code for now is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 


<style type="text/css"> 
body { 
   background-color:#000000; 
background-image:url(flame.jpg); 
background-repeat:no-repeat;
background-position:center top;
background-size: 100%
 } 




</style> 

</head> 
<body> 

<br /><br /><br /><br /><br /><br /><br />
<center>


<script type='text/javascript' src='jwplayer.js'></script>

<div id='mediaspace'>This text will be replaced</div>

<script type='text/javascript'>
  jwplayer('mediaspace').setup({
    'flashplayer': 'player.swf',
    'duration': '22',
    'file': 'intro.flv',
    'image': 'flame.jpg',
    'volume': '80',
    'controlbar': 'none',
    'autostart': 'true',
    'icons': 'true',
    'stretching': 'none',
    'width': '430',
    'height': '305'
  });
</script>
</center>
<a class="skippy" href="" ><img src="" /></a>
</div> 
</body> 
</html>

Thanks in advance :)

  • 3 Contributors
  • 3 Replies
  • 282 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Sogo7

Dani AI

Generated

Flash players (the old Flash/JW embeds) are rendered by the browser/plugin outside the normal HTML stacking, so z-index alone often looks ineffective. Follow two steps: (1) let the player be composited by the page (set the Flash wmode), and (2) place the graphic that should “sit on top” as an absolutely positioned DOM element (not as the body background). That combination makes a visible “window” in the artwork through which the video shows. was right about centering and z-index, and was right to flag the Flash stacking quirk — the wmode fix is the missing piece.

Minimal example (Flash object + overlay). The important line is the wmode param/attribute:

<div class="stage">
  <object width="430" height="305" type="application/x-shockwave-flash" data="yourplayer.swf">
    <param name="movie" value="yourplayer.swf" />
    <param name="wmode" value="opaque" />
  </object>

  <img class="overlay" src="overlay-with-hole.png" alt="">
</div>
.stage { position: relative; width: 430px; margin: 0 auto; }
.stage object { display: block; z-index: 1; }
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: none; /* allows clicks to reach the player underneath */
}

If using a JS player that generates the embed (old JW Player), pass wmode through the setup or ensure the generated <object>/<embed> contains wmode="opaque" or wmode="transparent". For modern work, prefer HTML5 <video> (no wmode needed) and the same absolute-overlay approach:

<video autoplay loop muted width="430" height="305" playsinline>
  <source src="video.mp4" type="video/mp4">
</video>
<img class="overlay" src="overlay-with-hole.png" />

Notes and gotchas: use opaque unless true alpha blending is needed (transparent hurts performance). Include the wmode both as a <param> and as an embed attribute if the player writes both. If the overlay should accept clicks, remove pointer-events:none and handle clicks explicitly. Flash is deprecated in modern browsers — for long-term compatibility, convert to an HTML5 format and use an overlay PNG/SVG or CSS mask for the “cut-out” effect.

Recommended Answers

All 3 Replies

Member Avatar for dany12

Ok first use margin:0 auto; for centering an element and then search on google for z-index that should solve your problems

Member Avatar for bulqr4eto

Cool...but I dont know how to make it...even after using z-index the video doesnt want to go behind the image :@

Member Avatar for Sogo7

Flash has some less known quirks and does not actually open inside the current window instead it creates a new one and that automatically gets put on top by the browser. This is why it does not appear to obey z-index settings. There's a documented workaround but it may be out of date for the current generation of web browsers.

The alternative would be to use the Flash file to create an animated jpg with the aid of javascript.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.