将Youtube嵌入到Modal时访问被拒绝错误

时间:2012-04-15 21:02:24

标签: jquery iframe youtube modal-dialog

我有一个页面,用户可以将Youtube视频发布到论坛。

用户发布视频链接后,链接将转换为以下内容:

<a href='javascript:void(0)' class='video_player' data-videoid='http://www.youtube.com/embed/$vidID'>$video_title</a>

$ vidID只是您在每个YouTube视频的网址中看到的Youtube视频ID。当用户单击链接以播放视频时,将打开一个模式,其中包含嵌入的视频。这是模态的JS:

$('.video_player').live('mouseover', function(event) {//VIDEO PLAYER MODAL
    var videoid = $(this).attr("data-videoid");
    var sourcepage = $(this).attr("data-sourcepage");
    $(this).qtip({
     id: 'videomodal',
     content: {
            text: '<img src="images/loading.gif" alt="Loading..." /> Loading..please wait.',
            ajax: {url: 'modals/video_player.php',type: 'GET',data: { videoid: videoid, sourcepage: sourcepage}},
            title: { text: 'Video Player', button: true }
     },
     position: {    my: 'center', at: 'center', target: $(window) },
     show: { event: 'click', solo: true, modal: true },
     hide: false,
     style: 'ui-tooltip-tipsy ui-tooltip-rounded higher-zindex',
     events: {
        hide: function(event, api){
         auto_refresh = setInterval(function (){$('#bottom_middle').load(thisurl + '&timer=' + new Date().getTime() + ' #bottom_middle' );}, 5000);             
         $(this).qtip("destroy"); 
        }
     },  
    });
return false;
});

这是我的video_Player.php代码:(非常基本,模态加载此页面,并嵌入所需的iframe来播放视频)

<?PHP
 $videoid = $_GET['videoid'];
 $sourcepage = $_GET['sourcepage'];

 echo "<iframe title='YouTube video player' width='480' height='390' src='$videoid' frameborder='0' allowfullscreen></iframe>";   
?>

在Chrome中,我得到了“不安全的JavaScript尝试使用URL blah blah访问框架”错误,但视频播放,一切似乎都正常,但在IE中我得到了SCRIPT5:访问被拒绝。我在网上搜索,这个网站是一个解决方案,但运气不好。有人知道这个或更好的方法吗?我使用模态(qtip2),这是唯一的要求。我的所有jquery库都是最新的。

1 个答案:

答案 0 :(得分:0)

尝试将此添加到您的代码中:

$('iframe').each(function(){
    var url = $(this).attr("src");
    $(this).attr("src",url+"?wmode=transparent");
});