What makes windows media player layer over my drop menu page elements? It doesn't seem to help if I change the z-index for the media player object. I have a z-index of 99 for my drop down menu page elements and of 40 for the object. This problem only happens when the video is running. When it isn't running the drop down menu elements show on top of the object. Here is the HTML.
<div id="player" style="position: relative; top: 20px; left: 35px; width: 64.5%; border: 2px solid grey; z-index: 40;">
<object id="MediaPlayer" width="100%" height="377" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="left: 0px; top: 0px; background-repeat: no-repeat; background-position: center center; z-index: 40;" type="application/x-oleobject">
<param name="uiMode" value="full" />
<param name="AutoStart" value="FALSE" />
<param name="AllowChangeDisplaySize" value="TRUE" />
<param name="AutoSize" value="TRUE" />
<param name="Volume" value="100" />
<param name="URL" value=mms://bstreamlivewm.fplive.net/bstreamlive-live/bstream2 />
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src=mms://bstreamlivewm.fplive.net/bstreamlive-live/bstream2 width="100%" height="377" showcontrols="1" showtracker="1" autostart="0" volume="100" />
</object>
</div>
What worked for me was <param name="windowlessVideo" value="true" > in the <object> tag and windowlessVideo="true" in the <embed> tag. I did not have to specify the wmode parameter. Here is the HTML that worked.
<object id="MediaPlayer" width="100%" height="377" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="left: 0px; top: 0px;
background-repeat: no-repeat; background-position: center center;" type="application/x-oleobject">
<param name="uiMode" value="full" />
<param name="AutoStart" value="FALSE" />
<param name="AllowChangeDisplaySize" value="TRUE" />
<param name="AutoSize" value="TRUE" />
<param name="Volume" value="100" />
<param name="URL" value=mms://bstreamlivewm.fplive.net/bstreamlive-live/bstream2 />
<!-- Be careful with opaque. The adobe documentation isn't clear about what it does for layering -->
<!-- Documentation about OBJECT and EMBED at http://kb2.adobe.com/cps/127/tn_12701.html -->
<!-- param name="wmode" value="opaque" / -->
<param name="windowlessVideo" value="true" />
<embed windowlessVideo="true" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
name="MediaPlayer" src=mms://bstreamlivewm.fplive.net/bstreamlive-live/bstream2 width="100%" height="377" showcontrols="1"
showtracker="1" autostart="0" volume="100" />
</object>
None of these work for Google Chrome. ASP menus always go to the background when a windows media player is involved.
Try looking into the wmode param,http://slightlymore.co.uk/flash-and-the-z-index-problem-solved/
Related
I have a problem with accessing 3 buttons on a webpage since they don't belong to the DOM and I cannot fetch them using ID or any other "anchor". These are ActiveX buttons from what I can see in the DOM tree, but I have no idea how to reach to them.
As for now, the only (stupid) workaround is to loop through all the items using on the page by SendKeys {TAB} and pressing space on each of them. Only those buttons react to the space key, but it's not a reliable solution, so I want find something proper.
I'm attaching the DOM screen from the area where they are placed on the page and the code where I think there are sitting.
<DIV id=divDragDrop style="HEIGHT: 200px; WIDTH: 700px; TEXT-ALIGN: left">
<!-- -------- DRAG/DROP ACTIVEX CONTROL AREA -------- -->
<OBJECT id=DragDropActiveX style="HEIGHT: 200px; WIDTH: 700px; LEFT: 0px; TOP: 0px; VISIBILITY: visible" name=DragDropActiveX codeBase="DragDropControl.dll" classid=clsid:b7e10a13-86c9-43af-9d8a-aa153b0470c8 enableviewstate="true">
<PARAM NAME="ClaimNumber" VALUE="0004887564">
<PARAM NAME="FileNoteNumber" VALUE="D3EFC3275F4ACA9D">
<PARAM NAME="FileNoteCategory" VALUE="COV">
<PARAM NAME="FileNoteSubcategory" VALUE="FNOL1">
<PARAM NAME="FileUploadServiceURL" VALUE="https://xlgc.r02.xlgs.local:443/Desktop/FileNotes/FileAcceptorForDragAndDrop.aspx?UserId=A135604">
<PARAM NAME="AllowedFileTypes" VALUE="doc.gif.htm.html.jpeg.jpg.pdf.rtf.tif.tiff.txt.xls.zip.fdf.xfdf.asp.asf.asx.aiff.au.dwg.dxf.dwf.atd.bmp.cvs.cfm.cfml.cgi.emz.cgm.csv.dec.dib.dcm.dtd.daf.eps.msg.fpx.xml.fos.mif.hdml.pcl.idl.xsf.xsn.one.ppt.mps.mpt.mpw.rmh.vsd.vss.vst.vsw.dot.dgn.mod.mp3.mpg.mpg2.mp4.mxf.pgm.ppm.soc.oft.pcx.pff.php.php3.phtml.pct.png.ps.pro.ptd.mov.ra.rm.ram.rmm.rnx.rv.svg.sct.scm.shtml.spml.stm.spl.swf.sgi.mht.smil.ras.sun.tga.avi.vrf.voc.wrl.wsdl.emf.jnt.wma.wax.wmv.wvx.wmf.wbmp.wpd.xfm.att.rls.rlx.ctm.hhf.mcr.tbr.ent.pen.xsd.elm.xsl.afp.cr2.crw.dita.dng.docm.docx.dotm.dv.eap.emcmf.f4v.flv.gxf.lxf.mdi.mmap.mmas.mmat.mss.odt.opml.pnm.pptx.pub.rle.ump.xlsb.xlsm.xlsx.xmi.pcd.eml">
<PARAM NAME="IsDirty" VALUE="False">
<PARAM NAME="MaxFileSizeInBytes" VALUE="">
<PARAM NAME="DraftVisible" VALUE="True">
<PARAM NAME="AutoSize" VALUE="False">
<PARAM NAME="AutoSizeMode" VALUE="GrowOnly">
<PARAM NAME="AutoValidate" VALUE="EnablePreventFocusChange">
<PARAM NAME="BorderStyle" VALUE="None">
<PARAM NAME="CurrentAutoScaleDimensions" VALUE="6, 13">
<PARAM NAME="AutoScroll" VALUE="False">
<PARAM NAME="AutoScrollMargin" VALUE="0, 0">
<PARAM NAME="AutoScrollMinSize" VALUE="0, 0">
<PARAM NAME="AccessibleDescription" VALUE="">
<PARAM NAME="AccessibleName" VALUE="">
<PARAM NAME="AccessibleRole" VALUE="Default">
<PARAM NAME="AllowDrop" VALUE="False">
<PARAM NAME="Anchor" VALUE="Top, Left">
<PARAM NAME="AutoScrollOffset" VALUE="0, 0">
<PARAM NAME="BackColor" VALUE="233, 238, 255">
<PARAM NAME="BackgroundImage" VALUE="">
<PARAM NAME="BackgroundImageLayout" VALUE="Tile">
<PARAM NAME="CausesValidation" VALUE="True">
<PARAM NAME="Cursor" VALUE="Default">
<PARAM NAME="Dock" VALUE="None">
<PARAM NAME="Enabled" VALUE="True">
<PARAM NAME="Font" VALUE="Arial, 11world">
<PARAM NAME="ForeColor" VALUE="Black">
<PARAM NAME="Location" VALUE="280, 652">
<PARAM NAME="Margin" VALUE="3, 3, 3, 3">
<PARAM NAME="MaximumSize" VALUE="0, 0">
<PARAM NAME="MinimumSize" VALUE="0, 0">
<PARAM NAME="Name" VALUE="DragDropControl">
<PARAM NAME="RightToLeft" VALUE="No">
<PARAM NAME="Size" VALUE="875, 250">
<PARAM NAME="TabIndex" VALUE="0">
<PARAM NAME="TabStop" VALUE="True">
<PARAM NAME="Tag" VALUE="">
<PARAM NAME="UseWaitCursor" VALUE="False">
<PARAM NAME="Visible" VALUE="True">
<PARAM NAME="PreferredSize" VALUE="685, 196">
<PARAM NAME="Padding" VALUE="0, 0, 0, 0">
<PARAM NAME="ImeMode" VALUE="NoControl">
</OBJECT>
<!-- ATTENTION: hDragDropState below is required for DragDropActiveX -->
<INPUT id=ctl00_MainContent_hDragDropState type=hidden name=ctl00$MainContent$hDragDropState>
<!-- ----- END DRAG/DROP ACTIVEX CONTROL AREA ------- -->
</DIV>
Thanks!
i have some old flash games.
They contains:
a .swf file
a folder with files with type 'File'
when i use following code it runs locally but when i upload it on my server online then it doesn't work.
<object type="application/x-shockwave-flash" data="race.swf" id="histo2" style="width:100%; height:100%;float: none; vertical-align:middle">
<param name="movie" value="race.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowScriptAccess" value="always" /><!-- sameDomain -->
<param name="wmode" value="opaque" />
<param name="quality" value="high" />
<param name="menu" value="false" />
<div class="outer">
<div class="middle">
<div class="inner">
<h3>Click below button to enable flash player or to install it.</h3>
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>
</div>
</div>
</object>
I use the following code to embed youtube video's and just show the controls so it only plays the audio:
<object height="25" width="610"><param name="movie" value="http://www.youtube.com/v/-YhQ7BetDdM&hl=en_US&color1=0xf4f4f4&color2=0xffffff&hd=0&fs=0">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/-YhQ7BetDdM&hl=en_US&color1=0xf4f4f4&color2=0xffffff&hd=0&fs=0" height="25" width="610" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always"> </embed>
</object>
I am wondering how to do the same thing but with a playlist of videos? I only want the controls to show.
I think this could be what you wanted link ->
The website
what you need is:
`<div style="position:relative;width:267px;height:25px;overflow:hidden;">
<div style="position:absolute;top:-276px;left:-5px">
<iframe width="300" height="300"
src="https://www.youtube.com/embed/youtubeID?rel=0">
</iframe>
</div>
</div>
`
I'd like an audio file to play automatically when I open the page.
Here's the code:
<object width="290" height="24" data="http://localhost/placement/theme/anomaly/sound/player.swf" type="application/x-shockwave-flash" id="audioplayer1">
<param name="movie" value="/placement/theme/anomaly/sound/player.swf" />
<param name="FlashVars" value="playerID=1&bg=0xCDDFF3&leftbg=0x357DCE&lefticon=0xF2F2F2&rightbg=0xE66511&rightbghover=0xEF9C10&righticon=0xF2F2F2&righticonhover=0xFFFFFF&text=0x357DCE&slider=0x357DCE&track=0xFFFFFF&border=0xFFFFFF&loader=0xAF2910&soundFile=/placement/theme/anomaly/sound/2.mp3" />
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="wmode" value="transparent" />
I tried to add the following line:
<param value="true" name="autoplay" />
but it doesn't work. Please help me.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="590" height="475" ID="Captivate1">
<param name="movie" value="untitled_skin.swf">
<param name="quality" value="high">
<param name="loop" value="0">
<param name="play" value="false">
<embed src="untitled_skin.swf" width="590" height="475" loop="0" quality="high" pluginspage="http://www.adobe.com/go/getflashplayer" type="application/x-shockwave-flash" play="false" flashvars="autoplay=false&play=false" menu="false"></embed>
</object>
could anyone please help me with a problem I have been having with a 100% - 350px layout for embedding vimeo video?
It seems like the right-margin property is getting ignored here, and the layout is overflowing to the right. I'm hoping this a simple mistake, but seems like I've tried everything. I'm running out of time.
Help would be really appreciated.
css:
#container {
position:absolute;
width:100%;
height:100%;
}
#content {
width:100%;
height:100%;
margin-left:350px;
margin-right:350px;
}
.video {
padding:0 0 0 0;
height:100%;
width:100%;
}
html (the vimeo embed code has been reformatted for validation):
<div id="container">
<div id="content">
<object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="color" value="ffffff" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
</object>
<div style="clear:both; height:1px; line-height:0"> </div>
</div>
</div>
EDIT:
Another solution I have tried:
<!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" />
<style>
#container {
position:absolute;
width:100%;
height:100%;
}
#content {
margin-left: 350px;
margin-right: 0px;
}
.video {
padding:0 0 0 0;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="color" value="ffffff" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
</object>
</div>
</div>
</body>
</html>
</head>
Edit: I'm using the solution for this type of positioning from this thread: How can I do width = 100% - 100px in CSS?
Here is a jQuery solution that works with multiple doctypes and in Chrome, Firefox and IE. IE will possibly show a blank page, but this is a Vimeo issue and can be solved by updating the IE flash plugin as discussed here and very extensively here.
I have also placed the code online.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vimeo test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
jQuery(function($){
$(window).load(function() {
var h = $(window).height() * 0.9;
var w = $("#content").width();
$(".video").width(w);
$(".video").height(h);
$("#content").css('visibility', 'visible');
});
});
</script>
<style type="text/css">
#container {
width:100%;
height:100%;
}
#content {
margin-left: 350px;
margin-right: 0px;
visibility: hidden;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<object class="video" width="400" height="225">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" />
<embed class="video" src="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225"></embed>
</object>
</div>
</div>
</body>
</html>
The width of an element does not necessarily prevent elements contained within it from overflowing that element.
If you wish things outside your DIV not to display, set its overflow to hidden: overflow: hidden.
I'm not even sure if I'm understanding your issue properly, to be honest. A clarification of what you're actually hoping to achieve might be helpful if I'm complete misreading you.
EDIT BELOW
Your approach is a bit strange, try this:
<div id="container">
<object> ... </object>
</div>
<style>
#container { position: absolute; right: 5px; }
</style>
Additionally, you're trying to size the video with CSS -- CSS isn't going to have any effect on an object. If you were to change, say, to video { width: 50px; } it would not make your video 50px wide.
Thankyou very much Erik and littlegreen. I have found the problem. It seems that you can't use a DOCTYPE if you want to do this. I just took out the Doctype and xmlns it worked. Wierd but effective.
In order to make the video smaller to stop at the right hand side of the screen (fit to the screen), you'll have to drop some of the 100% attributes and make a few more edits. Here's the new CSS and HTML.
CSS
#container {
width:100%;
height:100%;
}
#content {
margin-left: 350px;
margin-right: 0px;
}
.video {
padding:0 0 0 0;
width:100%;
height:90%;
}
HTML
<div id="container">
<div id="content">
<object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="color" value="ffffff" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
</object>
</div>
</div>
EDIT As Emile rightly pointed out, for some reason this only works if you don't set a DOCTYPE for your document. Otherwise it works in Chrome, but Firefox shows a blank screen. After some testing I concluded that this has to do with the percentage widths given for the video object. Firefox doesn't support that.
As Vimeo (unlike YouTube) doesn't allow URL parameters to be passed for determining the video size, and percentage widths apparently have quirks, my only other suggestion would be to specify a fixed width and height on the video object (like on this page, see the page source), set the visibility of the content DIV to invisible, use a Javascript or jQuery function to determine the page width, change the width/height attributes of the OBJECT tag accordingly, and set the object to visible again. It's not very neat, but it'll probably work, and it would be independent of doctype.
EDIT I have implemented this solution, and it works in all browsers. See my separate new answer about it.