HOME > BLOG > Modula PROで、ギャラリーにYouTube動画を埋め込む

Modula PROで、ギャラリーにYouTube動画を埋め込む

  • プラグイン
    •

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

     出典 : Modula Image Gallery

    今回のDEMOは、アクリルフィギュアの動画と画像をギャラリーにしました。

    MODULA MOVIE GALLERY

    GALLERY

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

    General

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

    動画を大きく、画像を小さく配置して、フィギュアごとにレイアウトを左右交互に

    項目設定値
    Gallery TypeCustom Grid
    Gutter0px
    Max Images Count0
    Mobile Max Images Count0

    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 animationNone
    Transition effectNone
    Allow swipingチェック有
    Infobarチェック有
    Auto start thumbnailsチェック無
    Lightbox background colorrgba(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 Opacity10
    Hover effect4. 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 Colorrgba(255,255,255,0.8)
    Play Icon SizePC：80px
    タブレット：50px
    SP：50px

    Responsive

    タブレット、SPでは3カラムにするため、Tablet Columns、Mobile Columnsを共に3に設定します。

    項目設定値
    Costom responsivenessチェック有
    Tablet Columns3
    Mobile Columns3

    YouTubeリンク

    最後に、動画のサムネイルにYoutubeのリンクを設定します。

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

    Video URLに動画のURLを入力

    以上で今回の説明は終了です。動画を入れると目を引くギャラリーになりますね。動画作成は時間がかかり、クオリティーも必要ですが、イメージを伝える有効な手段なので、ぜひ活用してみてください。

    Webサイト作成のご依頼は、コンタクトフォームより、よろしくお願いします。

    RECOMMEND

    CONTACT

    Webサイト作成は、是非
    CXG DESIGNへご検討ください。