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

最新推荐文章于 2024-03-22 15:56:31 发布

huangkang1995

最新推荐文章于 2024-03-22 15:56:31 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： html css javascript

本文链接：https://blog.csdn.net/huangkang1995/article/details/119898097

版权

前端专栏收录该内容

12 篇文章

订阅专栏

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>