こんにちは、皆さん！
今日は、ブログに訪れるたびに自動的に再生される動画を掲載する方法についてお伝えします。
これは、訪問者の注意を引きつけ、サイトの体験を一層鮮やかなものにする絶好の方法です。
HTMLの基本的な知識があれば、誰でも簡単に実装できます。では、早速見ていきましょう。
ブログに自動再生する動画を掲載
ブログに自動再生する動画を掲載したい場合、以下のHTMLコードを使用することで実現できます。
このコードは、ページを読み込んだときに動画が自動的に再生され、終わったらループ再生するというものです。
具体的なコードは以下の通りです。
html
<figure class="wp-block-video">
<video src="https://○○○.mp4" autoplay="autoplay" loop="loop" muted="" controls="controls" width="300" height="150"></video>
</figure>
ここで、「https://○○○.mp4」の部分には、あなたがブログに掲載したい動画のURLを記入します。
例えば、「https://example.com/myvideo.mp4」のように入力します。
以上のHTMLコードをブログの記事に追加すると、訪問者がページを開いた時点で動画が自動的に再生されるようになります。
その際、音声はミュートされ、コントロールバーも表示されるので、視聴者は必要に応じて再生・一時停止や音量調節が可能です。
また、動画のサイズは幅300ピクセル、高さ150ピクセルに設定されています。
この数字を変更すれば、ご希望のサイズにする事が可能です。
動画を自動再生するメリットとデメリット
【メリット】
視覚的なインパクト
訪問者がページを開いた瞬間に動画が始まることで、訪問者の関心をすぐに引くことができます。
ユーザーとの関わりを深める
動画は文字よりも情報を伝えやすいので、ユーザーとのつながりをより深くすることができます。
情報を素早く伝える
動画を自動再生することで、訪問者に対してすばやく情報を伝達できます。
【デメリット】
使いやすさへの影響
一部の訪問者は、自動で始まる動画をうっとうしく感じるかもしれません。
データの消費
特にスマートフォンなどで閲覧している場合、動画の自動再生はデータ通信量を大幅に使うことになります。
ページの読み込み遅延
動画は大きなデータ量を持つため、ページの読み込みを遅くする可能性があります。
これらを踏まえ、訪問者がストレスなくサイトを楽しむことができるように、自動再生動画の利用を考えると良いでしょう。
YouTube動画で自動再生を行う場合の方法
YouTubeの動画を自動再生するためには、動画の埋め込みコードに特定のパラメータを追加します。
以下に具体的な手順を示します。
- YouTubeの動画ページを開き、「共有」ボタンをクリックします。
- 「埋め込み」を選択します。すると、動画の埋め込みコードが表示されます。
- そのコードにパラメータ 「?autoplay=1」 を追加します。このパラメータを追加すると、ページが読み込まれたときに動画が自動的に再生されます。
例えば、元のコードが以下のようであれば：
html
<iframe width="560" height="315" src="https://www.youtube.com/embed/ABCDEFG" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
以下のようにパラメータ "?autoplay=1" を追加します：
html <iframe width="560" height="315" src="https://www.youtube.com/embed/ABCDEFG?autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
これで、YouTubeの動画をブログやウェブサイトに埋め込み、その動画を自動再生することができます。
ただし、ユーザビリティやデータ通信量の消費等を考慮して、自動再生をどう活用するかを考えることが重要です。
自動再生されない場合
近年のウェブブラウザの更新により、音声を含む動画の自動再生がブロックされることが多くなっています。
これは、ユーザーエクスペリエンスの向上とデータ消費量の節約を目的とした変更です。
特にGoogle Chromeなどの一部のブラウザでは、ユーザーの操作なしに音声付きの動画を自動再生することは基本的に禁止されています。
これは、ユーザーが予期しない音声の再生による驚きや不快感を防ぐための措置です。
そのため、YouTubeの動画を自動再生するためには、埋め込む動画をミュート（音声なし）にする必要があります。
この場合のYouTubeの動画埋め込みコードは以下のようになります：
html <iframe width="560" height="315" src="https://www.youtube.com/embed/ABCDEFG?autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
「?mute=1」 の追加により、動画は音声なしで自動再生されます。
ただし、ユーザーが音声をオンにしたい場合は、動画のコントロールパネルから手動で調整する必要があります。
以上で、ブログに自動再生する動画を掲載することができます。視覴的な要素をブログに追加することで、訪問者の関心を引き、情報伝達の効果を高めることが期待できます。