JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

ニュースティッカー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.getAttribute()で複数のYouTube動画をモーダルで再生

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.getAttribute()

JavaScriptの.getAttribute()で複数のYouTube動画をモーダルで再生

JavaScriptの.getAttribute()で複数のYouTube動画をモーダルで再生

今回は、JavaScriptの.getAttribute() でYouTube動画をモーダルで再生させます。

比較的、HTMLは簡素でメンテしやすい形で作っているので、最後までご覧いただけると嬉しいです。

.getAttribute()

JavaScriptの .getAttribute() は、HTML要素に属性を追加または変更するために使用するメソッドです。

let attribute = element.getAttribute(attributeName);

.getAttribute() は、2つの引数を受け取り、最初の引数は属性名であり、2番目の引数は属性値です。

メソッドを呼び出すと、指定した要素に新しい属性が追加されます。既存の属性を変更する場合は、属性名を指定して新しい値を設定するだけです。

かかかず
かかかず

動的にHTML要素の属性を制御することができるメソッドです。

複数のYouTube動画をモーダルで再生するサンプル

早速ですが、サンプルです。画像が4つ並んでいますが、これらは再生されるYouTube動画のサムネイルです。

クリックすることでYouTube動画のモーダルが立ち上がり自動再生され、オーバーレイか「✖️」をクリックするとモーダルが非表示になり、再生も停止されます。

Video Thumbnail Video Thumbnail Video Thumbnail Video Thumbnail

コードも後述していきますが、設置する動画に制限はないのでいくつでも設置可能です。

実装の手順と方法

手順と方法

コードの詳細の前に、実装の手順と方法について解説していきます。

HTMLを記述

まずは、HTMLを記述します。

設置したい場所に記述しましょう。

<img class="videoThumb" data-video-id="r0ieI2_LfmA" src="" alt="Video Thumbnail">
<img class="videoThumb" data-video-id="czqW-wlaZ-w" src="" alt="Video Thumbnail">
<img class="videoThumb" data-video-id="Wq6lAQrqY-k" src="" alt="Video Thumbnail">
<img class="videoThumb" data-video-id="aA8sRRbWT6c" src="" alt="Video Thumbnail">
JavaScriptを記述

次に、JavaScriptのコードを記述します。

コードは <body>〜</body>で、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

document.addEventListener('DOMContentLoaded', (event) => {
    // videoThumbのclass名がつく要素を全取得
    let imgTags = document.getElementsByClassName('videoThumb');
    // ループ
    for(let i = 0; i < imgTags.length; i++) {
        let videoId = imgTags[i].getAttribute('data-video-id');
        imgTags[i].src = `https://img.youtube.com/vi/${videoId}/0.jpg`;
        imgTags[i].addEventListener('click', function() {
            openModal(videoId);
        });
    }

    // モーダルの要素を作成
    let modal = document.createElement('div');
    modal.id = 'modal';
    modal.style.display = 'none';
    modal.style.position = 'fixed';
    modal.style.zIndex = '3';
    modal.style.left = '0';
    modal.style.top = '0';
    modal.style.width = '100%';
    modal.style.height = '100%';
    modal.style.overflow = 'auto';
    modal.style.backgroundColor = 'rgba(0,0,0,0.4)';
    modal.addEventListener('click', function(event) {
        if(event.target === modal) {
            closeModal();
        }
    });
    // modalContentの要素を作成
    let modalContent = document.createElement('div');
    modalContent.className = 'modalContent';
    // iframeのYouTube要素を作成
    let videoPlayer = document.createElement('iframe');
    videoPlayer.id = 'videoPlayer';
    videoPlayer.width = '560';
    videoPlayer.height = '315';
    videoPlayer.frameBorder = '0';
    videoPlayer.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';
    videoPlayer.allowFullscreen = true;
    // 閉じるボタンを作成
    let closeBtn = document.createElement('button');
    closeBtn.className = 'closeBtn';
    closeBtn.addEventListener('click', closeModal);

    modalContent.appendChild(videoPlayer);
    modalContent.appendChild(closeBtn);
    modal.appendChild(modalContent);
    document.body.appendChild(modal);
});
// モーダル関数
function openModal(videoId) {
    let modal = document.getElementById('modal');
    let videoPlayer = document.getElementById('videoPlayer');

    videoPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
    modal.style.display = 'block';
}
// モーダルを閉じる関数を作成
function closeModal() {
    let modalContent = document.querySelector('.modalContent');
    modalContent.style.animation = "fadeOut 0.7s";
    
    setTimeout(function() {
        let modal = document.getElementById('modal');
        let videoPlayer = document.getElementById('videoPlayer');

        videoPlayer.src = '';
        modal.style.display = 'none';
        //Reset the animation so it plays on the next open
        modalContent.style.animation = "fadeIn 0.7s";
    }, 700);
}
CSSを記述

最後にCSSを書きましょう。これで見た目を整えたら完了です。

img.videoThumb {
    cursor: pointer;
}
img.videoThumb:hover {
    opacity: 0.8;
}

.modalContent {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 0;
    border: 1px solid #888;
    animation: fadeIn 0.7s ease 0s 1 normal;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-width: 600px;
}
.modalContent iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}
button.closeBtn {
    display: inline-block;
    vertical-align: middle;
    color: #FFF;
    line-height: 1;
    width: 1.6rem;
    height: 0.2rem;
    background: currentColor;
    border-radius: 0.1rem;
    position: absolute;
    transform: rotate(45deg);
    border: none;
    right: -35px;
    top: 7px;
    opacity: 0.6;
    transition: 0.2s ease-in-out;
}
button.closeBtn:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    transform: rotate(90deg);
}
button.closeBtn:hover {
    opacity: 1;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(60px);
  }
}
かかかず
かかかず

これで完成です!

ざっくりとしたコードの解説

コードは、HTML・JavaScript・CSSの3種類です。ざっくりですが、順に解説していきます。

HTML

HTMLでは、YouTubeのビデオを表すサムネイル画像と動画を指定します。

img タグに「videoThumb」というクラスが割り当てられています。さらに、data-video-id属性で特定のYouTubeビデオのIDを格納しています。

<img class="videoThumb" data-video-id="r0ieI2_LfmA" src="" alt="Video Thumbnail">
<img class="videoThumb" data-video-id="czqW-wlaZ-w" src="" alt="Video Thumbnail">
<img class="videoThumb" data-video-id="Wq6lAQrqY-k" src="" alt="Video Thumbnail">
<img class="videoThumb" data-video-id="aA8sRRbWT6c" src="" alt="Video Thumbnail">

これにより、JavaScriptでこのIDを利用して動画のモーダル再生を行います。

JavaScript

JavaScriptは、ページの読み込みが完了した際にYouTubeのビデオサムネイルをクリックするとモーダルウィンドウで該当のビデオが再生される仕組みを実装しています。

.addEventListener()の「DOMContentLoaded」イベントで、クラス名videoThumbを持つ全ての画像タグを取得し、それらの要素にクリックイベントリスナーを設定します。

クリックされた要素の data-video-id から動画IDを取得し、それを用いてモーダルウィンドウに埋め込まれるYouTubeのiframeのsrc属性を設定します。

document.addEventListener('DOMContentLoaded', (event) => {
    // videoThumbのclass名がつく要素を全取得
    let imgTags = document.getElementsByClassName('videoThumb');
    // ループ
    for(let i = 0; i < imgTags.length; i++) {
        let videoId = imgTags[i].getAttribute('data-video-id');
        imgTags[i].src = `https://img.youtube.com/vi/${videoId}/0.jpg`;
        imgTags[i].addEventListener('click', function() {
            openModal(videoId);
        });
    }

    // モーダルの要素を作成
    let modal = document.createElement('div');
    modal.id = 'modal';
    modal.style.display = 'none';
    modal.style.position = 'fixed';
    modal.style.zIndex = '3';
    modal.style.left = '0';
    modal.style.top = '0';
    modal.style.width = '100%';
    modal.style.height = '100%';
    modal.style.overflow = 'auto';
    modal.style.backgroundColor = 'rgba(0,0,0,0.4)';
    modal.addEventListener('click', function(event) {
        if(event.target === modal) {
            closeModal();
        }
    });
    // modalContentの要素を作成
    let modalContent = document.createElement('div');
    modalContent.className = 'modalContent';
    // iframeのYouTube要素を作成
    let videoPlayer = document.createElement('iframe');
    videoPlayer.id = 'videoPlayer';
    videoPlayer.width = '560';
    videoPlayer.height = '315';
    videoPlayer.frameBorder = '0';
    videoPlayer.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';
    videoPlayer.allowFullscreen = true;
    // 閉じるボタンを作成
    let closeBtn = document.createElement('button');
    closeBtn.className = 'closeBtn';
    closeBtn.addEventListener('click', closeModal);

    modalContent.appendChild(videoPlayer);
    modalContent.appendChild(closeBtn);
    modal.appendChild(modalContent);
    document.body.appendChild(modal);
});
// モーダル関数
function openModal(videoId) {
    let modal = document.getElementById('modal');
    let videoPlayer = document.getElementById('videoPlayer');

    videoPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
    modal.style.display = 'block';
}
// モーダルを閉じる関数を作成
function closeModal() {
    let modalContent = document.querySelector('.modalContent');
    modalContent.style.animation = "fadeOut 0.7s";
    
    setTimeout(function() {
        let modal = document.getElementById('modal');
        let videoPlayer = document.getElementById('videoPlayer');

        videoPlayer.src = '';
        modal.style.display = 'none';
        //Reset the animation so it plays on the next open
        modalContent.style.animation = "fadeIn 0.7s";
    }, 700);
}

閉じるボタンも同様に設定し、そのクリックイベントでモーダルを閉じる動作を行います。

CSS

CSSは、ウェブページ上で動画のサムネイルとモーダルビデオプレーヤーのスタイルを定義しています。

videoThumbクラスを持つ画像は、カーソルが上に来たときにポインタに変わり、ホバー時には透明度が変化します。また、modalContentクラスはビデオプレーヤーの背景要素のスタイルを指定しています。

そしてcloseBtnクラスは、ビデオを閉じるためのボタンのスタイルを定義しています。

/* img.videoThumb のスタイル定義 */
img.videoThumb {
    cursor: pointer; /* マウスカーソルが画像の上に来たときに、ポインターに変更する */
}

/* img.videoThumb のホバー時のスタイル定義 */
img.videoThumb:hover {
    opacity: 0.8; /* マウスオーバー時に画像の透明度を80%に設定 */
}

/* .modalContent のスタイル定義 */
.modalContent {
    background-color: #fefefe; /* 背景色を設定 */
    margin: 15% auto; /* 上下のマージンを15%、左右のマージンを自動に設定 */
    padding: 0; /* パディングを設定 */
    border: 1px solid #888; /* 境界線の色と太さを設定 */
    animation: fadeIn 0.7s ease 0s 1 normal; /* アニメーションの名前、時間、タイミング関数、遅延時間、反復回数、方向を設定 */
    position: relative; /* 位置を設定 */
    width: 100%; /* 幅を100%に設定 */
    aspect-ratio: 16 / 9; /* アスペクト比を16:9に設定 */
    max-width: 600px; /* 最大幅を600pxに設定 */
}

/* .modalContent iframe のスタイル定義 */
.modalContent iframe {
    position: absolute; /* 絶対位置を設定 */
    width: 100%; /* 幅を100%に設定 */
    height: 100%; /* 高さを100%に設定 */
}

/* button.closeBtn のスタイル定義 */
button.closeBtn {
    display: inline-block; /* ディスプレイプロパティをinline-blockに設定 */
    vertical-align: middle; /* 垂直方向の配置を中央に設定 */
    color: #FFF; /* 文字色を白に設定 */
    line-height: 1; /* 行の高さを1に設定 */
    width: 1.6rem; /* 幅を1.6remに設定 */
    height: 0.2rem; /* 高さを0.2remに設定 */
    background: currentColor; /* 背景色を現在の文字色に設定 */
    border-radius: 0.1rem; /* ボーダーの角を丸める */
    position: absolute; /* 絶対位置を設定 */
    transform: rotate(45deg); /* 要素を45度回転させる */
    border: none; /* ボーダーをなくす */
    right: -35px; /* 右から-35pxの位置に配置 */
    top: 7px; /* 上から7pxの位置に配置 */
    opacity: 0.6; /* 透明度を60%に設定 */
    transition: 0.2s ease-in-out; /* 0.2秒間でプロパティを変更し、変更の速度が先頭と末尾でゆっくりとなるように設定 */
}

/* button.closeBtn:before のスタイル定義 */
button.closeBtn:before {
    content: ''; /* 内容を空に設定 */
    position: absolute; /* 絶対位置を設定 */
    top: 0; /* 上から0の位置に配置 */
    left: 0; /* 左から0の位置に配置 */
    width: 100%; /* 幅を100%に設定 */
    height: 100%; /* 高さを100%に設定 */
    background: inherit; /* 背景色を親要素から継承 */
    border-radius: inherit; /* ボーダーの角を親要素から継承 */
    transform: rotate(90deg); /* 要素を90度回転させる */
}

/* button.closeBtn のホバー時のスタイル定義 */
button.closeBtn:hover {
    opacity: 1; /* マウスオーバー時に透明度を100%に設定 */
}

/* fadeIn アニメーションの定義 */
@keyframes fadeIn {
  0% {
    opacity: 0; /* 開始時点での透明度を0%に設定 */
    transform: translateY(30px); /* 開始時点での要素の位置をY軸方向に30px下に移動 */
  }
  100% {
    opacity: 1; /* 終了時点での透明度を100%に設定 */
  }
}

/* fadeOut アニメーションの定義 */
@keyframes fadeOut {
  0% {
    opacity: 1; /* 開始時点での透明度を100%に設定 */
  }
  100% {
    opacity: 0; /* 終了時点での透明度を0%に設定 */
    transform: translateY(60px); /* 終了時点での要素の位置をY軸方向に60px下に移動 */
  }
}

最後に、fadeInfadeOutのキーフレームアニメーションは、モーダルの表示と非表示の際のトランジションを定義しています。

かかかず
かかかず

キーフレームアニメーションは好みに応じて変更するといい感じです。

さいごに

先生

今回は、YouTube動画をモーダルで表示させる方法について解説しました。

以前紹介の、jQueryのライブラリ「modal-video」に近い挙動をネイティブなコードで実装できるので、そちらの記事とあわせて参考にしてみてください。

UI

  • 他のウィンドウが開くことができないポップアップのUIです。

    モーダル

    モーダル

  • 並列な関係を持つ情報を1つずつ格納するUIです。

    タブ

    タブ

  • サイドから全体を覆うほど大きいメニュー表示するUIです。

    ドロワー

    ドロワー

  • 画像などのコンテンツをスライド表示させるUIです。

    スライダー

    スライダー

  • スクロールで表示が変化するスニペットです。

    スクロール

    スクロール

  • クリックすると隠れていた部分が開閉するUIです。

    アコーディオン

    アコーディオン

  • ページのhタグを取得して目次を生成するスニペットです。

    目次

    目次

  • ページの読み込み時にアニメーションをするスニペットです。

    ローディングアニメーション

    ローディングアニメーション

  • マウスオーバーした際に表示される補足説明です。

    ツールチップ

    ツールチップ

  • ページ内上部にあるナビゲーションUIです。

    ヘッダー

    ヘッダー

  • 行と列の組み合わせでできているUIです。

    テーブル

    テーブル

  • データを表やグラフで可視化して見せるUIです。

    グラフ

    グラフ

  • 背景をアニメーションで動かすスニペットです。

    背景

    背景

  • 短いテキスト情報をスクロール表示するUIです。

    ニュースティッカー

    ニュースティッカー

フォーム

  • ラジオボタン、チェックボックス、ドロップダウンリストなどを通じて、ユーザーが入力できるUIです。

    フォーム

    フォーム

文字

  • 文字列をJavaScriptで装飾・動きをつけるスニペットです。

    文字の装飾

    文字の装飾

  • 文字列の操作をして、置換・変更を行うスニペットです。

    文字の操作

    文字の操作

  • 文字列をカウントして表示などを行うスニペットです。

    文字のカウント

    文字のカウント

  • 数字の要素を取得して、変更するスニペットです。

    数字の操作

    数字の操作

ウィンドウ

classの操作

  • 要素を取得して、classを追加・削除するスニペットです。

    classの操作

    classの操作

要素の操作

API

  • WordPressのAPIを取得して表示するスニペットです。

    WP REST API

    WP REST API

  • Google Books APIsで書籍の情報を表示するスニペットです。

    Google Books APIs

    Google Books APIs

  • 楽天市場のAPIを取得して表示するスニペットです。

    楽天市場API

    楽天市場API

  • openBDのAPIを取得して表示するスニペットです。

    openBD

    openBD

画像・動画

  • 画像を取得して、アニメーションなどの変化を加えるスニペットです。

    画像の操作

    画像の操作

  • YouTubeの動画を表示するスニペットです。

    YouTube

    YouTube

リンク

  • ページ内のリンクを取得して変更・操作するスニペットです。

    リンク

    リンク

  • Google Analyticsとの連携をするスニペットです。

    Google Analytics

    Google Analytics

cookie

  • ブラウザのcookieを利用するスニペットです。

    cookie

    cookie

検索

  • 指定した要素の中から検索を行うスニペットです。

    検索

    検索