
Modula PROで、ギャラリーにYouTube動画を埋め込む
動画を取り入れているWebサイトを多く見かけます。今回は、Modula PROで、ギャラリー内にYouTube動画を埋め込む方法を紹介します。

出典 : Modula Image Gallery
今回のDEMOは、アクリルフィギュアの動画と画像をギャラリーにしました。
今回は、Custom Gridで作成しました。PC、SPともにスクロールで表示するギャラリーです。PCは、4カラム、SPは、3カラムになっています。6つのフィギュアを動画1点、画像4点で紹介しています。
General

Custom Gridで、PCのレイアウトを作成します。動画を大きく、画像を小さく配置して、フィギュアごとにレイアウトを左右交互にします。Gutterは、0に設定しました。

動画を大きく、画像を小さく配置して、フィギュアごとにレイアウトを左右交互に
項目 | 設定値 |
---|---|
Gallery Type | Custom Grid |
Gutter | 0px |
Max Images Count | 0 |
Mobile Max Images Count | 0 |
Lightbox & Links

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

タイトルもキャプションも表示しないので、Hide Title、Hide Captionにチェックを入れます。
項目 | 設定値 |
---|---|
Show Gallery Title | チェック無 |
Hide Title | チェック有 |
Hide Caption | チェック有 |
Hover effects

Hover effectを4. Hideに設定し、PCでホバーすると、画像が縮小されるエフェクトにしました。
項目 | 設定値 |
---|---|
Hover Color | #000000 |
Hover Opacity | 10 |
Hover effect | 4. Hide |
Video

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

タブレット、SPでは3カラムにするため、Tablet Columns、Mobile Columnsを共に3に設定します。
項目 | 設定値 |
---|---|
Costom responsiveness | チェック有 |
Tablet Columns | 3 |
Mobile Columns | 3 |
YouTubeリンク
最後に、動画のサムネイルにYoutubeのリンクを設定します。

動画のサムネイル画像をクリック

Video URLに動画のURLを入力
以上で今回の説明は終了です。動画を入れると目を引くギャラリーになりますね。動画作成は時間がかかり、クオリティーも必要ですが、イメージを伝える有効な手段なので、ぜひ活用してみてください。
Webサイト作成のご依頼は、コンタクトフォームより、よろしくお願いします。