【CMS活用術】ショップの魅力がもっと伝わる!動画の埋め込み方法をご紹介します

※本記事に関しては、e-shopsカートSのサポート窓口にお問い合わせいただきましてもご回答出来ませんので、予めご了承のうえ、ショップ様の自己責任のもとご利用ください。

みなさんこんにちは、ワニミです。
早速ですが、今回は「CMSサイトに動画を設置する方法」をご案内いたします!

サイト上に「動き」をつけることで、お客さまの目に留まりやすくなり、
ショップさまの魅力もよりダイレクトに伝えることができます!

「動画って難しそう…」と感じる方もいらっしゃるかもしれませんが、
本記事でご紹介するHTMLで簡単に表示できますので、ぜひお試しください♪

事前準備:動画のアップロード

サイトに設置する動画は、事前にご利用中のサーバーにアップロードし、URLを取得してください。

・推奨ファイル形式: mp4
・推奨サイズ: 10MB以下
※動画の容量が大きすぎるとページの読み込みが遅くなってしまいますので、ご注意ください。

動画の埋め込み方法

手順1. カートS管理画面「サイト作成」> レスポンシブ設定 > 利用中テンプレートの「編集」を押します

手順2. 「コンテンツ設定」タブを開き、自由項目「+」を押します

手順3. 項目名(必須)・見出し設定を適宜行い、内容*「 〈〉 」を押します

手順4. 以下のコードを入力し、「保存」>「設定する」の順に押します

<video playsinline autoplay loop muted width="100%">
  <source src="ここに取得した動画URLを貼り付けてください" type="video/mp4">
  ご使用のブラウザは動画再生に対応していません。
</video>

※「ご使用のブラウザは動画再生に対応していません。」という一文は、動画非対応のブラウザや環境で閲覧された際に表示される代替テキストです。

手順5. 「コンテンツ配置」タブ > 動画を表示したい箇所の「+」を押し、作成したコンテンツを追加します

手順6. サイト上に問題なく動画が表示されているか、ご確認ください

実際の表示は、弊社デモサイト「甘味屋」からご確認いただけます↓↓
甘味屋デモサイト:https://www.newkanmi-ya.com/

以上が動画の埋め込み方法となります。
動きがあるページは、お客さまの目にとまりやすく、ショップのこだわりを伝える強い味方になります!
ぜひ、ショップさまの素敵な動画を掲載して、より魅力的なサイト作りにお役立てください♪

カテゴリー: CMSレスポンシブサイト構築