YouTube黒い枠を出さない埋め込み方法でシンプルに実現できたので
自分への備考録としてメモしておきます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube黒い枠を出さない埋め込み方法</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.video_container{
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video_container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="video_container">
<iframe src="https://www.youtube.com/embed/7t0EtKlQxyo?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
プラグイン使用
https://github.com/pupunzi/jquery.mb.YTPlayer
ダウンロード後、
「dist/jquery.mb.YTPlayer.min.js」のデータをプロジェクトファイルに追加・読み込み
jQuery本体も読み込む
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="./jquery.mb.YTPlayer.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#ytPlayerWrap {
position: relative;
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="ytPlayerWrap" class="sample">
<div id="ytPlayer" data-property="{
videoURL: 'aqa9h-nL-TA',
containment: '#ytPlayerWrap',
autoPlay: true,
loop: 1,
mute: true,
startAt: 0,
showControls: false,
showYTLogo: false
}"></div>
</div>
<script>
$(function(){
$("#ytPlayer").YTPlayer();
});
</script>
</body>
</html>