動画挿入も簡単にできるSmart Slider 3(スマートスライダー)
Smart Slider 3といえば画像のカルーセルやレスポンシブ画像スライダーとして有名ですよね!
じつはこのスマートスライダーでも動画挿入や自動再生ができるのご存知でしょうか?
慣れれば凄く簡単ですので是非参考にしていただいてビジュアル的にも良いサイトを目指していただけると幸いです。
他にもSmart Sliderの日本語化や重いと言われているSmart sliderの高速化などいくつか記事をかいています。
情報を整理してまとめた記事もあるので良かったら一読お願いします!
Smart Slider 3の使い方と設定【まとめ】
さて、実際に動画挿入方法を見ていきましょう。
Smart Slider 3 の動画挿入方法
まずはNEW PROJECTする

新しく動画を挿入していくスライダーが必要になるため、まずはプロジェクトを作成しましょう。
緑色のNEW PROJECTをクリックすると作成することができます。
右のテンプレートをクリック

右のテンプレートをクリックして下さい。
左のNew Projectでも作成できるのですが、テンプレートから作って言ったほうが作りやすいです。
テンプレートでVIDEO Sliderを選択

スライダーがいくつかありますが、動画スライダーのvideo sliderをクリックして下さい。
既にあるテンプレートがインポートされてきます。
動画をクリックしてエディットモードに

スライダーが作られたら動画をクリックして下さい。
そうすると動画コンテンツの編集画面になります。ここで様々な設定を変更していきます。
YouTube URL Or Video IDってところに自分のアップロードした動画のURLを入れるとCover Imageも自動的に変化します。
カバーを変更したい場合はご自身で変更して下さい。
以上が、動画挿入まででした。次は自動再生設定ですね。
続きでできるので現時点で使わない人も覚えておいて下さい。
Smart Slider 3の動画自動再生設定
Video settingのAuto playをオンにする

先程動画のURLなどを挿入したGENERALの項目のしたにVIDEO settingsという項目がなります。
その中のAuto playをオンにすることで自動再生設定をすることができます。
- 自動再生開始時間
- 自動再生終了時間
- 動画ループ設定
などある程度、動画設定を柔軟に変更することができるので、おすすめですね。
いかがでしょうか?Smart slider 3は少し設定が複雑ですが少しずつ覚えておきましょう。
困った時はまとめ記事をご覧ください。
遅延読み込みやSEO対策設定などためになると思いますよ!