我试图淡入youtube iframe嵌入,但它只适用于IE9,所有其他最新的浏览器(Safari,Opera,Chrome,Firefiox)它没有. iframe立即显示为将不透明度设置为0.
我在Windows上.
我错了什么？
ps：这适用于Vimeo youtube iframe嵌入.
的jsfiddle：
解决方法
出于安全原因,当iframe /最近层的Alpha通道级别(不透明度/背景)减小时,内嵌框架将完全可见.因此,即使不透明度设置为0.99999,框架也会显示.
我为此问题创建了一个解决方案：创建两个大小相同的图层,然后在iFrame的父图层后面添加它们.
>将背景附加到第一个图像,这是视频的预览
>将第二个div的背景设置为页面的背景,例如白色.
然后,将第二个DIV设置为不透明度0.第一个图像的背景变得更加明显.在动画结束时,使用回调函数隐藏第一个div：
要允许用户在动画期间激活视频,请将单击事件处理程序绑定到DIV,DIV会立即隐藏图层,并调用内联视频的playVideo方法.
要调用playVideo方法,您需要对嵌入视频的引用.由于您尚未使用YouTube视频API创建视频,因此无法使用全局变量来访问视频.前段时间,我创建了一个函数来调用嵌入式视频上的方法.阅读：YouTube iframe API: how do I control a iframe player that’s already in the HTML?
最后的代码
我在小提琴上创建了一个实例：http://jsfiddle.net/jgtSS/34/.完整的代码也显示如下.
<html><head>
<style>
#holder,#ID-of-first-div,#ID-of-second-div{
position:absolute;
width:320px;
height:240px;
top:0px;
left:0px;
}
#ID-of-first-div,#ID-of-second-div {
background: #FFF;
}
#btn1{
position:absolute;
background:#09C;
width:40px;
height:40px;
top:250px;
left:0px;
}
</style>
<script type="text/javascript">
$(window).load(function() {
$('#btn1').click(function(){
var vid_id = $('#player').get(0).src.match(/embed\/([^?]+)/)[1];
var vid_bg = 'http://i2.ytimg.com/vi/'+vid_id+'/hqdefault.jpg';
$('<img>').attr("src",vid_bg).css({width:'100%',height:'100%',border:'none'}).appendTo('#ID-of-first-div');
$('#ID-of-second-div').animate({opacity: 0 },3000,function(){
$('#ID-of-first-div').hide();
});
var both = $('#ID-of-first-div,#ID-of-second-div');
both.click(function(){
both.hide();
callPlayer('player','playVideo');
});
});
});
/*
* @author Rob W (https://stackoverflow.com/questions/7443578/youtube-iframe-api-how-do-i-control-a-iframe-player-thats-already-in-the-html/7513356#7513356)
* @description Executes function on a framed YouTube video (see prevIoUs link)
* For a full list of possible functions,see:
* http://code.google.com/apis/youtube/js_api_reference.html
* @param String frame_id The id of the div containing the frame
* @param String func Desired function to call,eg. "playVideo"
* @param Array args (optional) List of arguments to pass to function func*/
function callPlayer(frame_id,func,args){
if(!document.getElementById(frame_id)) return;
args = args || [];
/*Searches the document for the IFRAME with id=frame_id*/
var all_iframes = document.getElementsByTagName("iframe");
for(var i=0,len=all_iframes.length; i<len; i++){
if(all_iframes[i].id == frame_id || all_iframes[i].parentNode.id == frame_id){
/*The index of the IFRAME element equals the index of the iframe in
the frames object (<frame> . */
window.frames[i].postMessage(JSON.stringify({
"event": "command","func": func,"args": args,"id": 1/*Can be omitted.*/
}),"*");
}
}
}
</script>
</head><body>
<div id="holder">
<iframe id="player" type="text/html" width="320" height="240"
src="http://www.youtube.com/embed/u1zgFlCw8Aw?wmode=transparent?enablejsapi=1"
frameborder="0"></iframe>
</div>
<div id="ID-of-first-div"></div>
<div id="ID-of-second-div"></div>
<div id="btn1"></div>
</body></html>
