youtube 视频引用问题 [隐藏标题和yt 图标]

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>   

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值