Website media player conflicting with web site's navigation bar

Question

I'm having trouble diagnosing a problem with a drop down menu.

On one of the web pages I'm working on there is a drop down menu on "services" in the navigation bar. It works on every page except this one page that uses a video player.

See the page it doesn't work on here. (PS this page isn't linked live yet)
http://tytonsound.com/_videos.php

One thing I've noticed is that if I move lines around in the header section I can make things work. For example:
The following 2 script files are at the top of the list of scripts. They control the drop down menu functionality.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/menu.js"></script>   

If I move them below the script lines that control the OSM media player, the media player no longer shows up, but the drop down menu works fine.

I'm not sure what to do, but I'm guessing there's a confliction with some JS scripting. I haven't run in to an issue like this before.

Thanks for the help!

Answer 1

If this is the media player you're talking about , there is probably a conflict between prototype and jQuery.

If you'd rather not rely on an iFrame , you can use jQuery.noConflict() and avoid conflicts but still use the media player. If I linked to the right media player, it will look something like this:

!-- Putting jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>

var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.

$j(document).ready(function() {
    $j("video").osmplayer({
      width: '100%',
      height: '600px'
    });
});
</script>

If I got the wrong media player, comment with a link to the correct one and I'll see if I can update the answer to reflect it.