Question

I have an embedded silverlight video player on our site, which is loaded in via an iframe (hosted on Azure).

On our site, the top navigation is somewhat long and it actually appears BEHIND the silverlight player you can’t see the menu.

I’ve looked at a few options to solve this, it looks like setting the windowless=true property should work ( http://msdn.microsoft.com/en-us/library/cc838156(v=vs.95).aspx ).. That solutions seems to work in IE, but in Chrome and Firefox if the windowless is set to true it attempts to download the page. Any ideas, thoughts?

Answer 1

After a lot of attempts we finally were able to get this to work in: IE, Firefox, and Chrome.

---

In the object data set the following tags:

       <param name="background" value="transparent">
       <param name="windowless" value="true">

Also set autoload and autoplay to be true in the initprams.

       <AutoLoad>true</AutoLoad>
       <AutoPlay>true</AutoPlay>

This is what our working full html looks like:

---

       <object data="data:application/x-silverlight," type="application/x-silverlight" width="100%" height="100%">
        <param name="source" value="MediaPlayerTemplate.xap"/>
        <param name="background" value="transparent" />
        <param name="windowless" value="true" />
        <param name="onerror" value="onSilverlightError" />
        <param name="autoUpgrade" value="true" />
        <param name="minRuntimeVersion" value="3.0.40624.0" />            
        <param name="enableHtmlAccess" value="true" />
        <param name="enableGPUAcceleration" value="true" />
        <param name="initparams" value='playerSettings = 
                    <Playlist>
                        <AutoLoad>true</AutoLoad>
                        <AutoPlay>true</AutoPlay>
                        <DisplayTimeCode>false</DisplayTimeCode>
                        <EnableCachedComposition>true</EnableCachedComposition>
                        <EnableCaptions>true</EnableCaptions>
                        <EnableOffline>true</EnableOffline>
                        <EnablePopOut>true</EnablePopOut>
                        <StartMuted>false</StartMuted>
                        <StretchMode>None</StretchMode>
                        <Items>
                            <PlaylistItem>
                                <AudioCodec>WmaProfessional</AudioCodec>
                                <Description></Description>
                                <FileSize>90818591</FileSize>
                                <FrameRate>5</FrameRate>
                                <Height>384</Height>
                                <IsAdaptiveStreaming>false</IsAdaptiveStreaming>
                                <MediaSource>i201700-1.wmv</MediaSource>
                                <ThumbSource>201700-1_Thumb.jpg</ThumbSource>
                                <Title>201700-1</Title>
                                <VideoCodec>VC1</VideoCodec>
                                <Width>512</Width>
                            </PlaylistItem>
                        </Items>
                    </Playlist>'/>       
        <!--  unused valid silverlight init parameters
        <param name="enableFrameRateCounter" value="bool" />
        <param name="enableRedrawRegions" value="bool" />
        <param name="maxFrameRate" value="int" />
        <param name="allowHtmlPopupWindow" value="bool"/>
        <param name="background" value="colorValue"/>
        <param name="splashScreenSource" value="uri"/>
        <param name="fullScreen" value="bool"/>
        <param name="onFullScreenChanged" value="functionname"/>
        <param name="onResize" value="functionname"/>
        <param name="onSourceDownloadComplete" value="functionname"/>
        <param name="onSourceDownloadProgressChanged" value="functionname"/>
        <param name="windowLess" value="bool"/>
         --> 

         <div onmouseover="highlightDownloadArea(true)" onmouseout="highlightDownloadArea(false)">
                <img src="700-1_Thumb.jpg" style="position:absolute;width:100%;height:100%;border-style:none;" onerror="this.style.display='none'"/>
                <img src="Preview.png" style="position:absolute;width:100%;height:100%;border-style:none;" onerror="this.style.display='none'"/>                                            
                <div id="overlay" class="fadeLots" style="position:absolute;width:100%;height:100%;border-style:none;background-color:white;"/></div>
                <table width="100%" height="100%" style="position:absolute;"><tr><td align="center" valign="middle">                       
                <img src="http://go2.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"> 
                </td></tr></table>                   
                <a href="http://go2.microsoft.com/fwlink/?LinkID=124807">
                    <img src="" class="fadeCompletely" style="position:absolute;width:100%;height:100%;border-style:none;" alt="Get Microsoft Silverlight"/>
                </a>                   
         </div>             
    </object>