在YouTube视频的顶部悬停Div

Question

我有一个脚本，该脚本正在调用youtube feed，然后显示视频（否iframe）请看小提琴：JSFIDDLE

我想在播放器顶部显示IMG，所以我附加了这样的IMG：

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

并分配给z-index:9999;，但是这似乎不起作用。我已经搜索了一个答案，似乎我必须将wmode="transparent"放入链接，但我不确定如何在URL中实现它。我该怎么做才能使其显示在播放器顶部的IMG？

Answer 1

您可以在Jtubeembed插件中添加一个新选项：http：//jsfiddle.net/afx29/2/

更改：

    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;
    }

并传递您想要的选项jTubeEmbed，例如：

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

Answer 2

播放器是一个闪存对象，将图像放在上面应该考虑：

在闪存对象上方显示图像

将此参数添加到视频中：

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

您可以在代码中尝试这样的事情：

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>';