![](https://cxg-design.jp/wp-content/uploads/2024/04/modulayoutubethumb001.png)
Modula PROで、ギャラリーにYouTube動画を埋め込む
動画を取り入れているWebサイトを多く見かけます。今回は、Modula PROで、ギャラリー内にYouTube動画を埋め込む方法を紹介します。
![](https://cxg-design.jp/wp-content/uploads/2023/09/2d6b3e47009b9498166cacc0cf25f9b1.png)
出典 : Modula Image Gallery
今回のDEMOは、アクリルフィギュアの動画と画像をギャラリーにしました。
今回は、Custom Gridで作成しました。PC、SPともにスクロールで表示するギャラリーです。PCは、4カラム、SPは、3カラムになっています。6つのフィギュアを動画1点、画像4点で紹介しています。
General
![](https://cxg-design.jp/wp-content/uploads/2024/04/eb3ca99372b8ea0c9ead8364b4238448.png)
Custom Gridで、PCのレイアウトを作成します。動画を大きく、画像を小さく配置して、フィギュアごとにレイアウトを左右交互にします。Gutterは、0に設定しました。
![](https://cxg-design.jp/wp-content/uploads/2024/04/0d13676af3961aefe576f6a53722cf08.png)
動画を大きく、画像を小さく配置して、フィギュアごとにレイアウトを左右交互に
項目 | 設定値 |
---|---|
Gallery Type | Custom Grid |
Gutter | 0px |
Max Images Count | 0 |
Mobile Max Images Count | 0 |
Lightbox & Links
![](https://cxg-design.jp/wp-content/uploads/2024/04/7a92d42c6bcf39bc5edcdfd8b45dfaab.png)
Loop navigationにチェックを入れて、ライトボックスで、画像、動画がループで表示されるようにします。Keyboard navigation、Mousewheel navigation、Allow swipingにチェックを入れて、PCでは、キーボード、マウスホイールでも、SPではスワイプでも、画像、動画の切り替えができるようにします。
項目 | 設定値 |
---|---|
Navigation arrows | チェック有 |
Loop navigation | チェック有 |
Show image title | チェック無 |
Show image caption | チェック無 |
Keyboard navigation | チェック有 |
Mousewheel navigation | チェック有 |
Tool bar | チェック有 |
Close button | チェック有 |
Close on slide click | チェック有 |
Open / Close animation | None |
Transition effect | None |
Allow swiping | チェック有 |
Infobar | チェック有 |
Auto start thumbnails | チェック無 |
Lightbox background color | rgba(30,30,30,0.9) |
Captions
![](https://cxg-design.jp/wp-content/uploads/2024/04/6ace554449e37fb46f09d43362d01207.png)
タイトルもキャプションも表示しないので、Hide Title、Hide Captionにチェックを入れます。
項目 | 設定値 |
---|---|
Show Gallery Title | チェック無 |
Hide Title | チェック有 |
Hide Caption | チェック有 |
Hover effects
![](https://cxg-design.jp/wp-content/uploads/2024/04/5a36282b6dbb9681f2df51d235fc9297.png)
Hover effectを4. Hideに設定し、PCでホバーすると、画像が縮小されるエフェクトにしました。
項目 | 設定値 |
---|---|
Hover Color | #000000 |
Hover Opacity | 10 |
Hover effect | 4. Hide |
Video
![](https://cxg-design.jp/wp-content/uploads/2024/04/eccad460088310eacf9e20e7c0e5f6d9.png)
Videoで、再生方法や、動画のサムネイルの設定をします。
まず、再生方法の設定をします。サムネイルをクリックしても、すぐに再生されないように、Autoplay Videosのチェックを外します。また、ループ再生せずに、次の画像を表示するため、Loop Videosのチェックは、外します。
次にサムネイルの設定です。プレイアイコンを表示したいので、Display Play Iconにチェックを入れます。また、アイコンのサイズをデバイスごとに変更するため、Play Icon SizeをPCでは80px、タブレット、SPでは50pxに設定します。
項目 | 設定値 |
---|---|
Autoplay Videos | チェック無 |
Loop Videos | チェック無 |
Display Play Icon | チェック有 |
Play Icon Color | rgba(255,255,255,0.8) |
Play Icon Size | PC:80px タブレット:50px SP:50px |
Responsive
![](https://cxg-design.jp/wp-content/uploads/2024/04/277ff4f41b4bc441e6f15480840e3fe9-2000x1293.png)
タブレット、SPでは3カラムにするため、Tablet Columns、Mobile Columnsを共に3に設定します。
項目 | 設定値 |
---|---|
Costom responsiveness | チェック有 |
Tablet Columns | 3 |
Mobile Columns | 3 |
YouTubeリンク
最後に、動画のサムネイルにYoutubeのリンクを設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/04/851af156698a492e99e33a6991d4e8d0.png)
動画のサムネイル画像をクリック
![](https://cxg-design.jp/wp-content/uploads/2024/04/17e996733b9c7886081b547bc2cac294.png)
Video URLに動画のURLを入力
以上で今回の説明は終了です。動画を入れると目を引くギャラリーになりますね。動画作成は時間がかかり、クオリティーも必要ですが、イメージを伝える有効な手段なので、ぜひ活用してみてください。
Webサイト作成のご依頼は、コンタクトフォームより、よろしくお願いします。