Video player blocking Bing Search pop up...

[chillspike]

Hi,

I have this Bing search site I'm working on that is having problems here:

searchsites.ms11.net/index2.htm

When you do a search, the Bing search pop up is being blocked by the YouTube video player. This only seems to occur on Windows based PC's. I've tested it in FireFox, internet Explorer and Chrome. The pop up displays under the video player in all three browsers making quite sure it is a Windows issue.


On my iMac the search pop up displays correctly over the video player.

Is there a hack or anything to fix this?

Beyond that, I was originally trying to add a Google Custom search Box to the site...But I wanted to add my own button on the same line and directly right of the search box...If anyone could show me exactly how to do that I would be willing to switch back to a Google Custom Search Box. Thank you;.

[Hades]

make sure the video has the <param name="wmode" value="transparent"> to allow content to be placed above it. Also remember to set the search panel with a z-index higher than the video.

If it doesn't work, I suggest you ask in the Coding Forum for more help on this. People over there know a lot more than me

[chillspike]

Originally Posted by Hades

make sure the video has the <param name="wmode" value="transparent"> to allow content to be placed above it. Also remember to set the search panel with a z-index higher than the video.

If it doesn't work, I suggest you ask in the Coding Forum for more help on this. People over there know a lot more than me

thanks, i will try the <param tag when I get home...as for the z-index for the search panel, i don't think Bing.com will allow any alteration of their code..

[Hades]

You don't need to modify the Bing API in order to add it a z-index, just wrap its code in a div element and add z-index to it.

<div style="z-index:2">
    ... bing code ...
</div>

I can't guarantee that it works in this case but that's what people usually do to put content on top of a flash animation.

[chillspike]

This is what I changed the code to:

<div style="z-index:2">
<p class="s">
<object width="340" height="290"><param name="wmode" value="transparent"></param><param name="wmode" value="transparent"></param><param name="wmode" value="always"></param><embed src="http://www.youtube.com/v/roRcIoO1iQY&border=1&color1=0x000000&color2=0x000000&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="340" height="290"></embed></object>
<iframe title="chillspike" src="http://www6.shoutmix.com/?chillspike" width="380" height="290" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?chillspike">View shoutbox</a>
</iframe>
<br />
</p></div>

But it's not working. Perhaps I'm doing something wrong?

[chillspike]

Well, I've kind of abandoned using Bing's search box for now. It's probably easier to solve the issues I was having with Google's search box.

So I've reinstalled Google's search box at my test site:

http://www.searchsites.ms11.net/index2.htm

Can you or anyone tell me how I can alter the code to have my own search button instead of Google's? I've replaced the button before with an image of mine but it doesn't line up directly to the right of the search box. I kind of lines up to the right but up a line. You can see my search button next to the google search button on my test site. I'm trying to get my rectangular button on the same line as the search box like google's search button. As you can see it's off a little.

What's even funnier is I had found the code online that worked perfectly for this but I accidentally deleted it and can't find it again.

[Hades]

You have to wrap the search panel in a div with z-index, instead you wrapped the video.
I suggest removing the <div style="z-index:2"> and put it around the Bing code.

If that doesn't do the trick then I suggest you ask in the Coding Forum.

[chillspike]

well, i tried that and it's not working either...but i left the bing search box up along with the google search box just in case you had any other suggestions ...did i set the params for the video code correctly?

[Hades]

I put a request to move this thread to the coding forum, surely somebody more skilled than me will give you some idea, there are some brilliant guys there

[chillspike]

how do i edit my post, julien? i want to make that second link unclickable...sorry, didn't realize we weren't allowed to post clickable links...

[chillspike]

Originally Posted by Hades

I put a request to move this thread to the coding forum, surely somebody more skilled than me will give you some idea, there are some brilliant guys there

thanks, hades and thanks for your help and time.

[htmlbasictutor]

It seems to be working fine here.

When I do a test search in the top search box the results appear over top of the rest of the page.

Try clearing your browser cache. Maybe the PC is caching your work in progress.

[chillspike]

Originally Posted by htmlbasictutor

It seems to be working fine here.

When I do a test search in the top search box the results appear over top of the rest of the page.

Try clearing your browser cache. Maybe the PC is caching your work in progress.

are you on a mac? i don't have this problem on a mac.

also tried clearing browser cache on my other computer (not mac) and it didn't help. i'm running windows vista.

[Hades]

I noticed that you added the wmode more than once as a <param> tag, and also it is usually recommended to add the wmode to the <embed> tag as well,

Try replacing the youtube object with this:

<object width="340" height="290"><param name="wmode" value="transparent"></param><embed wmode="transparent" src="http://www.youtube.com/v/roRcIoO1iQY&border=1&color1=0x000000&color2=0x000000&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="340" height="290"></embed></object>

Note that I removed some <param> elements, and I added wmode="transparent" to the <embed> object. I hope it works.

[chillspike]

Worked! You must be good as I've seen threads all over the internet with responses from "it can't be done" to "it can be done but with a lot of code".

You must know your stuff. Thanks, man! Awesome!

[chillspike]

While I have your expert ear:

can you tell me how I can alter the code to have my own search button instead of Google's for the google search box? I've replaced the button before with an image of mine but it doesn't line up directly to the right of the search box. It kind of lines up to the right but up a line. You can see my search button next to the google search button on my test site. I'm trying to get my rectangular button on the same line as the search box like google's search button. As you can see it's off a little.

[Hades]

Try replacing your google form with this:

<form action="http://www.searchsites.ms11.net/results.html" id="cse-search-box">
  <div style="width:350px;margin:0px auto;padding-left:50px; ">
    <div style="float:left;margin-top:2px;">
    <input name="cx" value="013989270954656242279:8sbdjjprvxc" type="hidden">
    <input name="cof" value="FORID:11" type="hidden">
    <input name="ie" value="UTF-8" type="hidden">
    <input style="border: 1px solid rgb(126, 157, 185); padding: 2px; background: rgb(255, 255, 255) url(http://www.google.com/coop/intl/en/images/google_custom_search_watermark.gif) no-repeat scroll left center; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" name="q" size="31" type="text">
    </div>
    <div style="float:left; margin-left:10px;">
    <input src="index2_archivos/button.jpg" alt="Submit button" type="image">
    <!--<input class="text" name="sa" value="Google Search" type="submit">-->
    </div>
  </div>
</form>

it's not very clean code but I wrote it quite fast and tested it from a firefox export of your page that I made, I'm not sure how it would work with other browsers.

[chillspike]

totally worked! you're 2 for 2! i just have to redo the button so it's the same size as the search box. sweet. thank you.