youtubeの埋め込み
youtube埋め込み、パラメータなどJSでやる場合メモ
サイズ計算は動画比率で異なるので別途やらないと
参考
- YouTube 埋め込みプレーヤーとプレーヤーのパラメータ – YouTube — Google Developers
- YouTube JavaScript Player API リファレンス – YouTube — Google Developers
- iframe 組み込みの YouTube Player API リファレンス – YouTube — Google Developers
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>youtube</title>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<script>
$(window).on('load resize', function(){
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$('iframe#movie').css({'width':windowWidth+'px','height':windowHeight+'px'});
});
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('movie', {
videoId: 'zX5cu9y9mgk', //ID
playerVars: {
'autohide': 0,
'autoplay': 1,
'controls': 0,
'disablekb': 1,
'iv_load_policy': 3,
'loop': 1,
'modestbranding': 1,
'showinfo': 0
},
});
}
</script>
<body>
<div id="movie"></div>
</body>
</html>