自動再生される動画ってどうやって埋め込むの
普通に埋め込むとに再生ボタン押さないと動画が流れない。
そもそも画面録画ってどうやってやるの
これ私も以前は分かりませんでした(笑)
最近、AI系の記事を見ていると、ツールの解説やAIによって画像が生成される瞬間を短い自動再生の動画で載せているブログやサイトを見かけるようになり、私のブログにも埋め込みたいと思い調べてみました。
こんな感じの動画です！！
絶対に動画の方が伝わりやすいですよね。
調べてみると、案外と簡単に作成できることが分かったので、皆さんにも共有したいと思います。
この記事を最後まで見ることで
あなたのブログやサイトに自動再生の動画を埋め込むことが出来るようになります。
結果、離脱率が下がり、サイトの滞在時間が長くなります。
そして、読者の理解度が上がることで、いい記事だと判断されることが多くなり上位表示の確率が上がるでしょう！！
自動再生の動画を埋め込む方法
テキストエディターにコードを直接入力することで可能になります。
入力するコードはコピーして使っていただけるので、安心して進んでください。
また、Macのデフォルトアプリで画面録画をするとMOVファイルで保存になるため、そのまま埋め込むことが出来ません。
動画ファイルをMP4にとても簡単に変換することができるので、その手順も合わせて解説して行きます。
画面収録をする方法
画面収録のツールバーを起動
キーボードのCommand + Shift + 5を同時に押すと、画面下部にスクリーンショットと画面録画のオプションが表示されるツールバーが出現します。
画面録画を開始する
前画面録画と選択範囲録画の２種類があります。
オプションの選択が可能ですが
こだわりがない場合は、特に触る必要はないかと思います。
詳しい解説はこちらでしていますのでご確認ください
今回はショートコードで画面収録をする方法を使います。
APPLE公式の解説はこちらから↓
録画した動画をMP4に変換する
Macで画面収録した動画はMOVファイルで収録されます。
そのため、比較的どのブラウザでも対応しているMP4に変換をしましょう。
iMovieを使ってMOVをMP4に変換
デフォルトアプリのiMovieを使って簡単にMP4に変換することが出来ます。
iMovieを起動する
まずLaunchpadからiMovieを起動して下さい。
ファイルのアップロード
左上の↓をクリックして、保存したファイルをiMovieへアップロードします。
撮影した動画データを選択して、すべて読み込みをクリック
ファイルの書き出し
アップロードしたファイルを下におろす。(ドラック&ドロップ)
右上の赤枠をクリックしてファイルの書き出しをする。
注意点：品質は最高にしないこと
最高にしてしますと、データが重くなりすぎる場合があるので注意
次へを選択して下さい。
ファイル名を変更して保存をして下さい。
ファイルの保存場所
データはダウンロードフォルダ内に保存されています。
しっかりMOVからMP４に書き変わっていますね！！
ブログ、サイトに動画を埋め込む
私はWordPressで編集をしていて、ブログのテーマは『JIN』を使用しています。
他のツールやテーマでは試していないので、不具合がある場合はコードの調整をお願いします。
テキストエディターを使ってコードを入力
ではMP4に変換した動画をWordPressブログに埋め込んでいきます！！
ブログの管理画面を開いて、テキストエディターを選択して下さい。
入力するコードはこれ(コピペ可能)
添付画像のようにコードを入力して下さい。
こちらのコードをコピーして使用して下さい。
<video autoplay loop muted playsinline width=”640″ height=”480″>
<source src=”ここに動画のURLを貼り付けてください” type=”video/mp4″>
お使いのブラウザはビデオタグをサポートしていません。
</video>
コードの中に『ここに動画のURLを貼り付けてください』
という箇所があるので、文字を消して、動画のURLをコピーして貼り付けて下さい。
入力コード、URLの確認
コード、URLに間違いがなければ、下の動画のように自動再生の動画がブログに埋め込まれます！！
WordPressブログにMacで簡単に自動再生の手順動画を埋め込む方法でした。
ぜひ試してみて下さい。
最後に
今回添付したコードはPC閲覧向けに作成したコードです。
PC以外の端末でも自動再生されるようにしていますが、サイズが少し大きくなってしまいます。
最適に表示されるには、レスポンシブに対応したコードの別途作成が必要になります。
ご了承ください！！
