CODEWITHSUNDEEP
javascriptjqueryyoutubeyoutube-api
Youss
Youss

Reputation: 4212

Hover div on top of youtube video

I have a script which is making call for youtube feeds and then displays the video (no iframe) Please take a look at the fiddle: JsFiddle

I want to show an img on top of the player so I appended an img like this: 

 html += '<span>Top Rated</span><img src="http://christianjamesphoto.com/themes/chrisjames/images/arrow-left.gif" /></div>';

and assigned to it a z-index:9999; However this doesnt seem to work. I have search for an answer to this and it seems that I have to put wmode="transparent" in to the link, but Im not sure how to implement this in the url. What can I do to make it show the img on top of the player?

Upvotes: 1

Views: 792

Answers (2)

Ricardo Souza
Ricardo Souza

Reputation: 16456

You can add a new option to the jTubeEmbed plugin like this: http://jsfiddle.net/aFx29/2/

Changes:

    jTubeEmbed: function(video, options) {
        var options = $.extend({
            // Embed Options
            width: 560,
            height: 340,
            wmode: 'window', // can be window, transparent and opaque

            // Player Options
            autoplay: false,
            fullscreen: false,
            related: true,
            loop: false,
            keyboard: true,
            genie: false,
            border: false,
            highdef: true,
            start: 0
        }, options);

        // ... ommitted for brevity ...

        if(options.wmode) {
            videoEmbed += '<param name="wmode" value="' + options.wmode + '"></param>';
        }

        if(options.fullscreen == true) {
            videoEmbed += '<param name="allowFullScreen" value="true"></param>';
        }

        videoEmbed += '<embed src="'+videoUrl+'"';
        videoEmbed += '    type="application/x-shockwave-flash"';

        if(options.wmode) {
            videoEmbed += '    wmode="' + options.wmode + '"';
        }

        if(options.fullscreen == true) {
            videoEmbed += '    allowfullscreen="true"';
        }

        videoEmbed += '    allowscriptaccess="always"';
        videoEmbed += '    width="'+options.width+'" height="'+options.height+'">';
        videoEmbed += '    </embed>';
        videoEmbed += '</object>';

        return videoEmbed;
    }

And pass in the option you want on the call for jTubeEmbed like:

$.jTubeEmbed(this.video, {
    // your options here,
    wmode: 'opaque'
});

Upvotes: 2

Matias Molinas
Matias Molinas

Reputation: 2296

The player is a flash object, to put an image on top you should consider:

Display image above flash object

Add this parameter to the videoEmbed:

videoEmbed += '<param name="wmode" value="transparent"></param>';

you can try something like this in your code:

html = '<li>';
html += '<div style="position:absolute; top:0px; z-index:2000;"><span>Top Rated</span>';
html += '<img src="http://christianjamesphoto.com/themes/chrisjames/images/arrow-left.gif" alt="" /></div>';
html += $.jTubeEmbed(this.video, embedOptions);
html += '<a href="'+this.link+'">'+this.title+'</a>';
html += '</li>';

Upvotes: 0

Related Questions