Squarespace で動画を自動再生する方法
公開: 2023-02-14Squarespace Web サイトに自動再生ビデオを追加することは、訪問者を惹きつけ、重要なコンテンツに注意を引くための優れた方法です。 自動再生ビデオは、製品のデモンストレーション、チュートリアル、または販促資料に特に役立ちます。 このガイドでは、Squarespace サイトに自動再生ビデオを追加する 3 つの異なる方法について説明します: YouTube 埋め込み、HTML ビデオ タグ、および SmartVideo (Swarmify)。
Squarespace サイトに自動再生 YouTube ビデオを追加する方法
YouTube は、最も広く使用されているビデオ ホスティング サービスの 1 つです。 幸いなことに、Squarespace 自動再生ビデオをサイトに追加するのは簡単です。 とはいえ、トラフィックの漏れや気を散らすものがない代替ホスティングサービスがビジネスにとってより良い選択である理由はいくつかあります.
最初のステップは、YouTube ビデオに移動してビデオを選択することです。 動画再生ページで、動画のタイトルの下にある高評価ボタンと低評価ボタンを見つけます。 それらのすぐ右側には「共有」ボタンがあります。 クリックして。
これにより、一連のソーシャル メディア リンクが表示されます。 「埋め込む」をクリックします。
新しいウィンドウがポップアップし、埋め込みコードが表示されます。 「コピー」をクリックすると、埋め込みコードがクリップボードにコピーされます。
これで、埋め込みコードができました。 ただし、このコードはビデオを自動再生しません。 自動再生を有効にするには、編集する必要があります。 コードをメモ帳などの単純なテキスト エディターに貼り付けます。
埋め込みコードでビデオの URL を見つけます。 次のようになります。
src="https//www.youtube.com/embed/xyz"
その URL の末尾の引用符内に、次のように追加します。
?autoplay=1&mute=1
コードは次のようになります。
src="https//www.youtube.com/embed/xyz?autoplay=1&mute=1"
このコードの変更により、自動再生がアクティブになり、デフォルトでビデオがミュートされます。 Chrome、Safari、Firefox などの多くのブラウザは、動画がミュートされていない場合、動画の自動再生をブロックしようとします。
コードを編集したので、Squarespace サイトに戻ります。 動画が必要なサイトのセクションまで下にスクロールします。 別のセクションがまだない場合は、青いボタン – [セクションの追加] を使用して追加します。
次に、セクションの右上隅にある鉛筆ボタンをクリックしてセクションを編集します。
次に、追加できるいくつかの異なる要素が表示されます。 [基本] という見出しの下で、新しいコード ブロックを追加するオプションを探します。 </> コードをクリックします。
最後に、埋め込みコードをテキスト ファイルからコピーして、コード エディターに貼り付けます。 サイトが自動的に更新され、動画が表示されます。 それがYouTubeビデオを埋め込む方法です
HTML タグを使用して自動再生ビデオを埋め込む方法
YouTube やその他のビデオ ホスティング サイトにアップロードしていないビデオがある場合は、Squarespace 自体をホストとして使用できます。 動画が、アップロードされた動画に設定された要件を満たしていることを確認してください。
最初のステップは、アセット ライブラリを開くことです。
次に、ビデオ ファイルをコンピューターからアセット ライブラリにドラッグ アンド ドロップして、アップロード プロセスを開始します。
動画がアップロードされたら、[ファイルの詳細] ボタン (動画の隅にある 3 つのドット) をクリックします。 次に、アップロードした動画の新しい URL を見つけます。
その URL をコピーして、メモ帳などのテキスト エディターに貼り付けます。 次に、次のように URL の周りに HTML タグを追加します。
<video controls autoplay muted src="[URL]"></video>
ビデオの HTML コードの準備ができたら、(前述の方法を使用して) コード ブロックを追加し、コードを貼り付けることができます。
Squarespace サイトに自動再生 SmartVideo を追加する方法
動画をサイトに配置するときは、読み込みが速く、邪魔にならないようにする必要があります。 これを行う最善の方法は、Swarmify のようなコンテンツ配信ネットワークを利用することです。 Swarmify の SmartVideo を使用すると、ビデオ コンテンツを完全に制御できるため、気を散らす広告によるトラフィックの損失を防ぐことができます。
さらに、Swarmify は、ビデオ コンテンツを他のどのサービスよりも速く視聴者に配信するように慎重に設計されたサーバーのグローバルに分散されたネットワークを所有しています。 自動再生 SmartVideo を Squarespace サイトに追加するのは簡単です。
まず、SmartVideo アカウントをセットアップします。 アカウントのセットアップが完了すると、いくつかのスクリプト コードと、ビデオを Swarmify で配信するために必要な swarmcdnkey が提供されます。
次に、Squarespace サイトに SmartVideo をインストールします。 設定をクリックします。
[詳細] をクリックします。
次に、[コード インジェクション] をクリックします。
その後、キーと一緒に受け取った断片化されたコードをヘッダー テキストボックスに貼り付けます。
最後に、[保存] をクリックします。
変更を保存すると、SmartVideo がサイトに完全にインストールされます。 サイトに YouTube ビデオがある場合、SmartVideo は自動的にそれらを邪魔のないビデオに変換し始めます。 別のソースからのビデオがある場合は、SmartVideo タグを使用する必要があります。
以前の他の方法と同様に、これは新しいコード ブロックを使用して実現されます。 Squarespace サイトに移動し、ビデオが必要なセクションに移動し、[編集] をクリックしてから、[</> コード] をクリックします。
コード ボックスを作成したら、次の構文を使用して SmartVideo タグを追加します。
<smartvideo src="[URL]" width="1280" height="720" class="swarm-fluid" poster="path/to/my/image.png" controls muted autoplay></smartvideo>
このコードにより、ビデオがサイトに追加されます。 URL は動画へのリンクである必要があります。 SmartVideo は、Vimeo、Amazon S3、Google Cloud Storage、Dropbox、Google ドライブ リンクなどをサポートしています。
コントロール オプションを使用すると、ユーザーはビデオを一時停止して再生できます。 ミュートおよび自動再生オプションは、このガイドで説明した他の方法と同様に機能します。
SmartVideo がビジネスに最適なオプションである理由
リストした 3 つのオプションのうち、ビデオ コンテンツをサイトに追加する際に SmartVideo が明らかに勝者である主な理由がいくつかあります。 最初のオプションは YouTube に依存しています。 YouTube はユーザーになじみのある高速なプレーヤーですが、欠点もあります。 YouTube の主な問題は、動画が始まる前に再生される可能性がある広告です。
これらの広告は見込み客の注意をそらし、最終的にサイトやブランドからトラフィックをそらしてしまう可能性があります。 これは、YouTube を使用して「無料」で動画を埋め込むことができる料金です。 さらに、YouTube ビデオの最後に、プラットフォームは常に、サイトのトピックに関連する場合とそうでない場合がある他のビデオを推奨します。
2 番目のオプションは、ビデオをホストする Squarespace に依存しています。 ただし、Squarespace では、サイトにアップロードする場所に応じて、動画の形式と長さに制限を設けています。 たとえば、サイトのセクションにある Video 要素により、最大 60 秒のアップロードに制限されています。 さらに、Squarespace はビデオ ホスティング サービスとして設計されたものではありません。
3 番目のオプションは、自動的に、または SmartVideo タグを介して SmartVideo を使用することです。 このオプションを使用すると、トラフィックを吸い上げる広告がなく、高速なビデオ配信が可能になります。 さらに、SmartVideo は高速です。 当社のプレーヤーは、YouTube のプレーヤーよりも 12 倍以上高速に読み込まれます!
さらに、YouTube はカスタマー サポートをほとんど提供しません。 一方、Swarmify では、経験豊富でフレンドリーなサポート チームにアクセスでき、必要なことは何でも手伝ってくれます。
今すぐ Swarmify を始めましょう!
切り替える
