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

今回の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サイト作成のご依頼は、コンタクトフォームより、よろしくお願いします。