youtube 视频引用问题 [隐藏标题和yt 图标]
官方文档
下面的代码做到了
自动播放视频
循环播放视频
隐藏YT图标和视频标题
<script src="../../js/jquery-1.7.2.min.js"></script>
<style>
.iframeVideoBox{ position: relative;padding-bottom: 56.4%;overflow: hidden;}
.iframeVideoBox iframe{
position: absolute;
top: 0;
height: 100%;
/* 下面这俩很重要 使用css隐藏了标题和YT的图标*/
width: 300%;
left: -100%;
/* 下面这俩很重要 使用css隐藏了标题和YT的图标 end*/
pointer-events: none;
}
</style>
<div class="iframeVideoBox">
<div class="iframeYtVideo" id="iframeYtVideo-01" data-video-id="wR2NfdbiYXc"></div>
</div>
<script>
/*https://developers.google.com/youtube/iframe_api_reference*/
/* youtube 使用 youtube 的控件必须添加 调用成功后 youtube 后自动调用 onYouTubeIframeAPIReady */
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
/* youtube 使用 youtube 的控件必须添加 调用成功后 youtube 后自动调用 onYouTubeIframeAPIRead end */
function onYouTubeIframeAPIReady()
{
$(".iframeYtVideo").each(function(k,v){
var id = $(this).attr("id")
var ytId = $(this).attr("data-video-id")
var defaults = {
width: 640,
height: 360,
playerVars: {
autohide: 0,
autoplay: 1,
cc_load_policy: 0,
controls: 0,
fs: 0,
iv_load_policy: 3,
modestbranding: 1,
playsinline: 1,
rel: 0,
modestbranding:1,
},
videoId: ytId,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
}
player = new YT.Player(id,defaults);
function onPlayerReady(event)
{
// 静音播放 不然不能自动播放
event.target.mute();
event.target.playVideo();
}
function onPlayerStateChange(event)
{
console.log(event.data);
switch (event.data) {
case -1:
break;
case 0: // 循环播放视频
onPlayerReady(event);
break;
case 1: // playing
break;
case 3: // buffering
break;
}
}
})
}
</script>