Pocketサイトのメインビジュアルで動画がを再生するのは最近のトレンドとなっています。今回はさらにアレンジして自動再生動画を使ったスライダーの作成に挑戦してみました。その際の知見をご紹介いたします。完成形デモをご紹介します。こちらをご覧ください。{event.target.playVideo();event.target.mute();}はい。かしゆかかわいいですね。次に作り方を見ていきましょう。今回のスライダーは、レスポンシブ・タッチデバイスにばっちり対応、カスタマイズ性も高いスライダープラグイン「slick」を使用しました。needslickの基本形まずは、slickをダウンロードして中のjsとcssを読み込みます。jQuery本体を設置するのも忘れないようにしましょう。src="js/slick.min.js"></script>続いてhtmlを記述します。cssは既に読み込んでいるので、新たに設定せずともスライダーの基本形は表示されます。スライダーの見た目を調整したい場合は適宜cssを追加してください。href="#">動画をいれます。href="#">動画をいれます。href="#">動画をいれます。</a></li></ul>次にjQueryでslickのスライド表示と動きを設定します。今回は以下のように設定にいたしました。スライダーの基本形はこれで完成です。//CSS3アニメーションイージングを設定});slickの他のカスタマイズは以下をご参考ください。stand-4U自動再生できる動画は消音限定ここから自動再生動画をスライドに入れていくのですが、1つ注意点があります。Safari(バージョン11.0)より、オーディオ付きのメディアが自動再生されない仕様に変更となりました。制作側からするとかなり困る仕様変更ですが、ユーザー側としては、勝手に音が出るのはびくっとしますし、自動再生できなくなったのは良い対応ですね。自動再生させたい動画は必ずミュートにしなければなりません。これを覚えておいてください。動画を入れ込むには2つの方法があります。html5のvideoタグを使う方法です。muted></a></li></ul>videoタグには属性を設定することで、動画の挙動を制御できます。今回は自動再生の「autoplay」、繰り返し再生する「loop」、ミュート設定の「muted」を設定しました。ミュートと自動再生を同時に設定することで、自動再生が可能になります。videoタグのその他の属性については下記リンクをご参考ください。続いてYouTubeの動画を埋め込む方法の紹介です。こちらのが手順が少し複雑です。videoタグと同様に、動画の挙動を制御するパラメータを設定できるですが、残念ながらミュートの設定はありません。API」を利用します。src="https://www.youtube.com/iframe_api"></script>つづいて、動画を読み込ませたい位置に以下のようにdivを記述します。--></ul>その後にjQueryでパラメータを設定を行います。パラメータの指定はコメントにしてありますので、そちらをご参考ください。自動再生やループ設定の他に、YouTubeをデフォルトで読み込ませるとYouTubeのロゴやタイトル、関連動画などが表示されてしまうので、そのあたりを制御しました。{event.target.playVideo();event.target.mute();}YouTubeのIDは入れ込みたい動画のページURLの「https://www.youtube.com/watch?v=」以下の文字列になります。最後にcssで読み込んだ動画表示を調整します。レスポンシブでも上手く表示できるように調整しました。100%;}これで、YouTubeの埋め込みは完成です!まとめ以上が、スライダーに自動再生動画を使う場合の設置方法になります。動画をスライドで見せる場合は、いくつも動画を読み込むことになると思うので、上記に加え、動画の軽量化や読み込むまでのローディングの設定なども重要になってくるなと感じました。5G回線が普及すればもっと豊かなコンテンツの見せ方も登場してくると思います。Pocket東京・名古屋を中心に、中小企業に特化したホームページ制作会社。マーケットやビジネスモデルに合わせ一社一社に合わせたウェブ制作・リニューアルのご提案しています。1000サイト以上のウェブマーケティング支援で獲得したノウハウで、リニューアル後に過去最高の成果を生み出したお取引先は多数。勘ではなくロジックに基づいたホームページ制作と柔軟な対応力で多数のお客様にご評価頂いております。どのようなお悩みでも構いません。ホームページを有効的に活用できていないと考えているご担当者の方、まずは一度弊社にご相談くださいませ。中心に中小企業のウェブマーケティング支援を行っている会社です。ホームページ制作からSEO・リスティング広告まで幅広くサービスをご提供しています。