Youtube動画をサイトに埋め込んでサムネイルを指定する


<div class="global_wrapper">
	<div class="youtube">
		<img src="./thumbnail.png" alt="" data-video="7E5g5EIRzZM" class="thumb">
		<iframe src="https://www.youtube.com/embed/7E5g5EIRzZM?si=CPmgWtAxY3mrSNcN_&amp;start=0" frameborder="0" allowfullscreen autoplay playsinline class="movie"></iframe>
	</div>
</div>


#youtubeVideo .global_wrapper {
	width: 700px;
	margin: 0 auto;
	}
#youtubeVideo .youtube {
	position: relative;
	width: 700px;
	height: 394px;
	}
#youtubeVideo .player {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	}
#youtubeVideo .thumb {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 700px;
	height: 394px;
	}
#youtubeVideo iframe.movie {
	width: 700px;
	height: 394px;
	}
@media screen and (max-width: 767.9px) {
	#youtubeVideo .youtube,
	#youtubeVideo .global_wrapper,
	#youtubeVideo iframe.movie,
	#youtubeVideo .thumb {
		width: 300px;
		height: 169px !important;
		}
	}


$(function() {
//Mobile判定
	var mobile = false;
	var ua = navigator.userAgent;
	if (
		ua.indexOf("iPhone") > 0 ||
		ua.indexOf("iPod") > 0 ||
		ua.indexOf("iPad") > 0 ||
		(ua.indexOf("Android") > 0 && ua.indexOf("Mobile") > 0)
	) {
		mobile = true;
	}
//スマホの場合muted属性追加
	if (mobile) {
		$("iframe").each(function() {
			$(this).attr("muted", "");
		});
	}
	$(".thumb").click(function() {
		var player = $(this).next("iframe")[0].contentWindow;
		player.postMessage('{"event":"command","func":"playVideo","args":""}', "*");
		$(this).hide();
	});
});

TOP