ki-hi-ro.com WEB制作フリーランスエンジニア
  • Service
    • WEBサイトの更新サポート
    • 新規サイトコーディング
  • Introduce
    • メッセージ
    • 自宅兼事務所
    • Twitter
  • Blog
    • 技術ブログ
    • 学習ブログ
    • 雑記ブログ
  • Others
    • スケジュールのお知らせ
    • お問い合わせ
    • WEBに関する無料相談
  • Top
  • Service
  • Introduce
  • Blog
  • Contact

YouTubeのポップアップモーダルを作成しました。

現在取り組んでいるLPコーディングで、YouTubeをポップアップモーダルで表示するという仕様を実現したので、それについて書いていきます。

使用したライブラリは「modaal」、参考にしたページは「動くWebデザイン モーダルウィンドウ -ページを開くと、背景が暗くなり動画を表示-」です。

デモ

デモサイトはこちらです。

画像をクリックすると、YouTubeのポップアップモーダルが表示されます。

最近YouTubeを始められた綾部さんの動画を使用しました。

作成方法

必要なファイルの読み込み → HTMLの記述 → JSの記述 の順番に見ていきます。

必要なファイルの読み込み

CSSファイルの読み込み

headタグで、modaal.min.cssを読み込みました。

<head>
//省略

 <link rel="stylesheet" type="text/css"     href="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/css/modaal.min.css"

//省略
</head>

JSファイルの読み込み

bodyの閉じタグの直前で、modaal.min.jsとyoutube-popup.js(自作JSファイル)を読み込みました。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/js/modaal.min.js"></script>

<script src="youtube-popup.js"></script>

</body>

HTMLの記述

リンク先にはYouTubeの埋め込みURLを指定し、画像をクリックするとモーダルが開くような準備をしました。

<a href="https://www.youtube.com/embed/eXE3ejJeJfQ" class="video-open">

 <img src="movie.png" alt="動画" class="movie__img"/>

</a>

YouTubeの埋め込みURLは、埋め込みたいYouTube動画の「共有 → 埋め込む」から取得しました。

JSの記述

HTMLのリンクをクリックしたのをきっかけにモーダルが表示されるような記述を行いました。

function youtube_modal(trigger) {
  $(trigger).modaal({
    type: "video",
  });
}

youtube_modal(".video-open");

関連記事

2022.05.08 jQuery LPコーディングで使用した「jQuery」

サービス一覧

  • WEBサイトの更新サポート
  • 新規サイトコーディング

自己紹介

  • メッセージ
  • 自宅兼事務所
  • Twitter

ブログ

  • 技術ブログ
  • 学習ブログ
  • 雑記ブログ

その他

  • スケジュールのお知らせ
  • お問い合わせ