YouTubeの動画をWebサイトのメインビジュアルに上手に埋め込む
はじめに
この記事の概要
こんにちは！株式会社TOKOSのエンジニアのタクヤです！
今回はYouTubeの動画をWebサイトのメインビジュアルに上手に埋め込む方法をご紹介します！
YouTubeにアップロードされている動画をWebサイトのメインビジュアルにする際に、そのままiframeで埋め込んでしまうと動画の再生ボタンやYouTubeチャンネルのアイコンなどが表示されてしまいます。
それだとWebサイトのメインビジュアルに使うには少し心許ないですね。
そんな時のためにWebサイトのメインビジュアルに良い感じにYouTubeの動画を埋め込む方法をご紹介します！
簡単なのでぜひ使ってみてください！
対象読者
- Webサイトに動画を埋め込みたい方
- WebサイトのメインビジュアルにYouTubeの動画を埋め込みたい方
実装方法
YouTubeのIFrame Player APIを使用してYouTubeの動画を埋め込みます。
IFrame Player APIとは
IFrame Player APIは、YouTubeなどの動画プラットフォームが提供するAPIの一種です。具体的には、YouTubeの埋め込みプレーヤー（Embedded Player）を制御するためのAPIです。このAPIを使用することで、ウェブページ上にYouTubeの動画を埋め込み、再生、一時停止、音量調整などの操作を制御できます。
IFrame Player APIは、通常、JavaScriptを使用して実装されます。以下は、簡単な例です。この例では、YouTubeの埋め込みプレーヤーを作成し、ページ読み込み時に自動で再生を開始する方法を示しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>YouTubeの動画をWebサイトのメインビジュアルに上手に埋め込む</title>
<link rel="stylesheet" href="./reset.css" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="c-mv">
<div class="c-mv__container">
<h1 class="c-mv__title">Compfire By The River</h1>
</div>
<div id="youtube" class="c-mv__video"></div>
<div class="c-mv__mask"></div>
</div>
<script src="./index.js"></script>
</body>
</html>.c-mv {
aspect-ratio: 16/9;
height: auto;
position: relative;
width: 100%;
}
.c-mv__container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
padding: 40px;
position: relative;
width: 100%;
z-index: 1;
}
.c-mv__title {
color: #fff;
font-size: 32px;
font-weight: 700;
margin: 0;
}
.c-mv__video {
bottom: 0;
height: 100%;
left: 0;
overflow: hidden;
opacity: 1;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 0;
}
.c-mv__mask {
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
left: 0;
height: 100%;
top: 0;
width: 100%;
z-index: 2;
}var tag = document.createElement("script")
tag.src = "https://www.youtube.com/iframe_api"
var firstScriptTag = document.getElementsByTagName("script")[0]
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
let player
function onYouTubeIframeAPIReady() {
player = new YT.Player("youtube", {
// youtubeの箇所はHTMLのid
videoId: "Ftm2uv7-Ybw", // YouTubeの動画のID
playerVars: {
playsinline: 1, // インライン再生
autoplay: 1, // 自動再生
fs: 0, // 全画面表示ボタン
rel: 0, // 関連動画
controls: 0, // コントロール
iv_load_policy: 3, // 注釈を非表示
},
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange,
},
})
}
// ミュートで再生
function onPlayerReady(event) {
event.target.mute()
event.target.playVideo()
}
// 最後まで再生した後のループ再生
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
event.target.playVideo()
}
}コード全体について解説
HTMLはシンプルです。
- テキスト要素
- YouTubeのiframeが入る要素
- YouTubeのiframeをマスクする要素
<div class="c-mv">
<div class="c-mv__container">
<!-- テキスト要素 -->
<h1 class="c-mv__title">Compfire By The River</h1>
</div>
<!-- YouTubeのiframeが入る要素 -->
<div id="youtube" class="c-mv__video"></div>
<!-- YouTubeのiframeをマスクする要素 -->
<div class="c-mv__mask"></div>
</div>CSSは画面の横幅いっぱいに要素の大きさを設定し、YouTubeの動画に合わせてアスペクト比を設定しています。
また、YouTubeのiframeの上に来るマスク要素を用意することでiframeをユーザーが直接触れられないようにしています。
.c-mv {
/* 省略 */
aspect-ratio: 16/9; /* Youtubeの動画のアスペクト比 */
}
.c-mv__container {
/* 省略 */
z-index: 1; /* テキスト要素を真ん中の層に配置 */
}
.c-mv__video {
/* 省略 */
z-index: 0; /* 動画要素を下の層に配置 */
}
.c-mv__mask {
/* 省略 */
z-index: 2; /* マスク要素を上の層に配置 */
}詳しいパラメータについては公式ドキュメントを参照してください。
YouTube Player API Reference for iframe Embeds | YouTube IFrame Player API | Google for Developers
アプリに YouTube プレーヤーを埋め込みます。
developers.google.comJavaScriptでは、IFrame Player APIのドキュメントをほとんどそのまま使用しています。
変えるところは、HTMLのidとYouTubeの動画のIDくらいです。
ローディング画面などはお好みで付け加えてください！
function onYouTubeIframeAPIReady() {
player = new YT.Player("youtube", {
// youtubeの箇所はHTMLのid
videoId: "Ftm2uv7-Ybw", // YouTubeの動画のID
// 省略
})
}さいごに
今回はYouTubeの動画をWebサイトのメインビジュアルに上手に埋め込む方法を紹介しました！ Webサイトのメインビジュアル用に良い感じに埋め込めたかと思います！ ぜひご参考にしていただけたらと思います！
この記事を書いた人
