I have <div> element to show pop-up message. I already set z-index:1000 and add <iframe> but the div element still doesn't show above the live streaming video (embed plugin) in Safari browser. I used Chrome and Firefox, both of which work, but it doess't work in Safari Windows.
This is my code in a Fiddle.
<BODY style="background:transparent">
<div style="position:relative; z-index:0;">
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="240" height="180">
<param name="wmode" value="transparent"></param>
<embed height="180" width="240" align="left" src="xxxx.avi" autoplay="false" controller="true" wmode="transparent"></embed>
</object>
<object>
<param name="wmode" value="transparent"></param>
<param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="240" height="180"></embed>
</object>
</div>
<div id="draggable">
<div class="drag">
<p>Drag me around!! Drag me around!!</p>
<p>Drag me around!! Drag me around!!</p>
<p>Drag me around!! Drag me around!!</p>
</div>
<iframe class="frame"></iframe>
</div>
Can anyone find any issues with this code?
You need to change/set your wmode to opaque.
<embed src="..." wmode="opaque"></embed>
And try setting the appropriate type for the first object.
<embed src="xxxx.avi" ...wmode="opaque" type="application/x-shockwave-flash"></embed>
http://jsfiddle.net/8C2py/7
As far as I can remember flash is on top of all HTML elements.
You can try to hide it when the pop up is there. Unfortunately I haven't seen a work around for that yet.
One good method is to have a place holder image that is the same size as the video and toggle them
<div class="video">
<!-- video here -->
</div>
<div class="placeholder" style="display:none;">
<img src="path/to/placeholder.jpg"
</div>
when you have the pop up opened
$(".video").css('display','none');
$(".placeholder").css('display','block');
Here are the specs of the z-index property (src: w3.org):
Each box belongs to one stacking context. Each positioned box in a
given stacking context has an integer stack level, which is its
position on the z-axis relative other stack levels within the same
stacking context.
I think that <div class="drag"> is not in the same stacking context as your flash objects.To make sure that the stacking context is correct, make the <div id="draggable"> also relative, and give it a higher z-index than the <div> that contains the flash objects.
Note: I'm not able to test Safari at the moment, so let me know if it works or not:
<div style="position:relative; z-index:1;">
... your flash objects...
</div>
<div id="draggable" style="position: relative; z-index: 2;">
<div class="drag">
<p>Drag me around!! Drag me around!!</p>
<p>Drag me around!! Drag me around!!</p>
<p>Drag me around!! Drag me around!!</p>
</div>
<iframe class="frame"></iframe>
</div>
works IE FF Chr & Saf
Placing a div over an iframe/video...
to place div over an image just replace the iframe w/ your image ....
trick part is for video ... you must add ... ?wmode=transparent ... to the end of the src url...
<!DOCTYPE HTML >
<style type="text/css">
.Container {position:relative; float:left; border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%; }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6; opacity:0.5; border: 1px solid #f00; }
</style>
<div id="Cntr0" class="Container" style="width:220px; height:140px;">
<iframe id="frm0" class="Vid" src='http://www.youtube.com/embed/y1VVXrUdO2s?wmode=transparent' frameborder='0'></iframe>
<div id="div0" draggable="true" class="Lyr" ></div>
</div>
or if you want to use your Object code....
<!DOCTYPE HTML >
<style type="text/css">
.Container {position:relative; float:left; border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%; }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6; opacity:0.5; border: 1px solid #f00; }
</style>
<div id="Cntr0" class="Container" style="width:260px; height:190px;">
<object class="Vid" >
<param name="wmode" value="transparent"></param>
<param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="240" height="180"></embed>
</object>
<div id="div0" draggable="true" class="Lyr" ></div>
</div>
and the avi code....
<!DOCTYPE HTML >
<style type="text/css">
.Container {position:relative; float:left; border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%; }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6; opacity:0.5; border: 1px solid #f00; }
</style>
<div id="Cntr0" class="Container" style="width:260px; height:190px;">
<object class="Vid" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="240" height="180" >
<param name="wmode" value="transparent"></param>
<embed height="180" width="240" align="left" src="xxxx.avi" allowscriptaccess="always" autoplay="false" controller="true" wmode="transparent"></embed>
</object>
<div id="div0" draggable="true" class="Lyr" ></div>
</div>
Related
I'm trying to implement this code to preload images, but it isn't working.
Add CSS:
div#preload { display: none; }
In the footer within the </body> tag:
<div id="preload">
<img src="http://gearenergy.com/wp-content/uploads/2018/04/Home-Banner-final.jpg" width="1140px" height="500px" alt="Home-Banner_01" />
<img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background.jpg" width="550px" height="400px" alt="PresentationBG_02" />
<img src="http://gearenergy.com/wp-content/uploads/2018/07/orange-color-overlay.png" width="600px" height="600px" alt="FinanceReportBG_03" />
<img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background-blue.jpg" width="550" height="400" alt="LatestNewsBG_04" />
</div>
Obviously I've replaced the HTML and repointed to the images, but it's still not working.
Personally I would use JavaScript in this case. But if you want only CSS you can preload all images in a div tag which is positioned in hidden part of window like follows:
#preload
{
position:absolute;
top:-9999px;
left:-9999px;
}
<div id="preload">
<img src="http://gearenergy.com/wp-content/uploads/2018/04/Home-Banner-final.jpg" width="1140px" height="500px" alt="Home-Banner_01" />
<img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background.jpg" width="550px" height="400px" alt="PresentationBG_02" />
<img src="http://gearenergy.com/wp-content/uploads/2018/07/orange-color-overlay.png" width="600px" height="600px" alt="FinanceReportBG_03" />
<img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background-blue.jpg" width="550" height="400" alt="LatestNewsBG_04" />
</div>
I am having trouble getting the image to show up in my html
<div id="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="/web/20120116002959oe_/http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="580" height="250">
<param name="movie" value="images/stockbridgeiron.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="images/stockbridgeiron.swf" width="580" height="250" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</div>
css code
div#header {
width: 928px;
height: 250px;
background: url(images/bg-header.jpg) top left no-repeat;
text-align: right;
}
It's because the background is overwritten with this selector:
.thrColFixHdr #header
You can add !important to your background property to override it.
background: url(images/bg-header.jpg) top left no-repeat !important;
Div tag with SWF content and background image should auto stretch so that the height of the background image and the div tag change accordingly to the SWF content. And they should not go behind div tags that are positioned under them, like the footer for example.
What I would like to achieve can be seen here on this website, where the SWF game loads.
I am quite a beginner in web design and was asked to achieve this, so I am sorry if this actually a stupid question and easily done, I just couldn't find any tutorials or explanations of how it is done.
this is the css of the page: (the div tag in question is #game )
* {
margin:0;
padding:0;
}
body {
height: 100%;
background-image: url(_assets/gray_bcg.png);
background-repeat: repeat;
background-x-position: center;
background-y-position: top;
background-attachment: fixed;
background-color: #ccc;
margin: 0;
}
#container {
display:block;
width:100%;
}
#wrapper {
height:auto!important;
min-height:100%;
position:relative;
width:918px;
background-image:none;
background-repeat:repeat-y;
margin:0 auto;
padding:0;
}
#content {
width: 918px;
}
#header {
display: block;
height: 368px;
width: 914px;
cursor: pointer;
background-image: url(_assets/1header.png);
background-repeat: no-repeat;
margin: 0 auto;
}
#headerSides {
display: block;
width: 100%;
height: 734px;
z-index: -1;
background-image: url(_assets/1sidebars.png);
background-repeat: no-repeat;
background-position: center top;
}
#headerLeft {
float: left;
position: absolute;
width: 916px;
background-image: none;
margin: 200px 0 0;
left: 0px;
}
#nav {
float:left;
width:584px;
margin:0;
padding:0;
}
#headerSides #wrapper #header #headerLeft #search {
height:59px;
width:306px;
float:right;
margin:-58px 0 0;
}
#add1 {
background-image: url(_assets/recatangle_ad_container.png);
float: left;
height: 105px;
width: 746px;
margin: 0 0 10px;
}
#logo {
background-image: url(_assets/logo_container.png);
float: right;
height: 106px;
width: 166px;
}
.centered {
display:block;
height:65px;
width:122px;
margin:15% auto 5%;
}
#game {
background-image: url(_assets/gcont917x605.png);
height: auto;
width: 917px;
margin-top: 110px;
padding-top: 25px;
padding-left: 160px;
background-repeat: no-repeat;
}
#footer {
background-image: url(_assets/footer.png);
background-repeat: no-repeat;
width: 917px;
clear: both;
height: 300px;
float: left;
}
and this is the html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="games.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="headerSides">
<div id="wrapper">
<div id="header">
<div id="headerLeft">
<div id="navbar">
<a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','_assets/_menu/n_home_over.png',1)">
<img src="_assets/_menu/n_home.png" alt="Home" width="117" height="60" id="Home" />
</a>
<a href="games.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('games','','_assets/_menu/n_games_over.png',1)">
<img src="_assets/_menu/n_games.png" alt="Games" width="117" height="60" id="games" />
</a>
<a href="blog.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('blog','','_assets/_menu/n_blog_over.png',1)">
<img src="_assets/_menu/n_blog.png" alt="Blog" width="117" height="60" id="blog" />
</a>
<a href="forum.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('forum','','_assets/_menu/n_forum_over.png',1)">
<img src="_assets/_menu/n_forum.png" alt="Forum" width="117" height="60" id="forum" />
</a>
<a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','_assets/_menu/n_about_over.png',1)">
<img src="_assets/_menu/n_about.png" alt="About" width="117" height="60" id="about" />
</a>
</div>
<!-- ends navbar -->
<div id="search">
<img src="_assets/search_bt.png" width="306" height="59" alt="search" />
</div>
<!-- ends search -->
<div id="add1">
<img src="_adds/728x90.jpg" alt="add1" width="726" height="88" align="right" />
</div>
<!-- ends add1 -->
<div id="logo">
<img src="_assets/efLogo.png" width="122" height="65" alt="logo" class="centered" />
</div>
<!-- ends logo -->
<div id="content">
<div id="game">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="600" height="400" align="middle" id="FlashID" title="epic boss fighter">
<param name="movie" value="_games/EpicBossFighter.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object data="_games/EpicBossFighter.swf" type="application/x-shockwave-flash" width="600" height="400" align="middle">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" />
</a>
</p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<!-- ends game -->
<div id="footer"></div>
</div>
<!-- ends content -->
</div>
<!-- ends headerleft -->
</div>
<!-- ends heADER -->
</div>
<!-- ends wrapper -->
</div>
<!-- ends headerSides -->
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>
why can't i see the video, it just show a white space. (i edited the link of the video)
if i check the video on youtube its fine.
if i right click on the white space it says "movie not loaded" but even if i wait doesn't happen anything. i also uploaded the video on the ftp of the website, can i just load it from there? how?
<html>
<head>
<title></title>
</head>
<body style="margin:0px auto; text-align:center; color:white;" >
<div id="container" style="margin:0; padding:0; text-align:center;" >
<div id="main" style="width:100%;margin:0px auto;">
<div id="hdr" style="background-image:url(bg.jpg);float:left;width:100%;height:110px;">
</div>
<div id="hdr2" style="background-image:url(fascia.png);float:left;width:100%;height:70px;">
footer
</div>
<div id="bdy" style="background-image:url(bg.jpg);float:left;width:100%;height:70px;">
body
</div>
<div id="ftr" style="background-image:url(bg.jpg);float:left;width:100%;height:500px;">
<object width="640" height="360"><param name="movie" value="//www.youtube.com/v/xxxxxxxxx"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/xxxxxxxxx" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>
<div id="ftr2" style="background-image:url(bg.jpg);float:left;width:100%;height:280px;">
</div>
</div>
</div>
</body>
</html>
Use this:
<iframe width="640" height="360"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
Hopes this helps!
Need Help on adding text on top of, so the text is overlaying an HTML 5 Video, And I also need to add a form inputs and buttons as well below is my HTML5 Video Code.
<video id="video" width="770" height="882" onclick="play();">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
Surely you are looking for more than this:
<div class="container">
<video id="video" width="770" height="882" onclick="play();">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
<div class="overlay">
<p>Content above your video</p>
<form>
<p>Content Below Your Video</p>
<label for="input">Form Input Label</label>
<input id="input" name="input" value="" />
<button type="submit">Submit</button>
</form>
</div>
</div>
If you want to put the content on top of the video, you would use some kind of positioning:
.container { position:relative; }
.container video {
position:relative;
z-index:0;
}
.overlay {
position:absolute;
top:0;
left:0;
z-index:1;
}
You can use top and left position to be in percentage. as it will auto adjust top text when the window content size will change
<div class="container">
<video id="video" width="770" height="882" onclick="play();">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
<div class="overlayText">
<p id="topText">Content above your video</p>
</div>
</div>`enter code here`
#overlayText {
position:absolute;
top:30%;
left:20%;
z-index:1;
}
#topText {
color: white;
font-size: 20px;
align-self: center;
}