sibahuです。
今回は、CSSを使用せずにWordPressでYouTube動画をセンタリング・自動再生・ループ再生する方法をお伝えします。
事前準備：自分が埋め込みたい動画のリンクをコピーする
まずは、自分がワードプレスで埋め込みたい動画を再生します。
そして、動画のすぐ下にある「共有」をクリックします。
「共有」をクリックした後にポップアップでこのような画面が表示されるので「埋め込む」をクリックします。
右下にある「コピー」をクリックします。
動画の再生開始時間を指定したい場合は「STEP1」を行う前に開始させたい時間まで動画を進めておきます。その後、「STEP1」～「STEP3」まで進み「開始位置」にチェックを入れた状態でコピーしてください。
YouTubeの動画をセンタリングに配置する
完成形がこちらです。
STEP1 : カスタムHTMLを追加する
自分がYouTubeの動画を埋め込みたい場所に移動してブロックの追加を押します。
「カスタムHTML」を押します。
「カスタムHTML」が追加されました。
STEP2 : カスタムHTMLにコードを記載する
追加した「カスタムHTML」に下記のようにソースコードを記載します。
<div align="center">ここに先ほどコピーした動画のリンクを貼り付ける</div>
無事、完成しました。
「プレビュー」を押して上のように動画がセンタリングになっていることを確認してください。
YouTubeの動画を自動再生する
完成形がこちらです。
STEP1 : カスタムHTMLを追加する
自分がYouTubeの動画を埋め込みたい場所に移動してブロックの追加を押します。
「カスタムHTML」を押します。
「カスタムHTML」が追加されました。
STEP2 : カスタムHTMLにコードを記載する
<div align="center">ここに先ほどコピーした動画のリンクを貼り付ける</div>
現段階では上記のような状態になっていると思います。
「XXXXXXXXXXX」の部分は動画ごとに違った文字列になっています。
この記事では、分かりやすくするために「XXXXXXXXXXX」と記載しました。
コピーしたリンクの文字部分に読み替えながら進めてください。
embed/XXXXXXXXXXXの後、frameborder="0"の前にコードを追加します。
?autoplay=1&mute=1自動再生は「autoplay=1」だけを意味していますが、自動再生を行った際に音がいきなり出てしまって視聴者を驚かさないために消音「mute=1」を入れておかないと自動再生ができないようになっています。
追加すると以下のコードようになります。
無事、完成しました。
「プレビュー」を押して上のように動画が自動再生されていることを確認してください。
YouTubeの動画をループ再生する
完成形がこちらです。
動画を再生してループ再生されることを確認してみてください。
STEP1 : カスタムHTMLを追加する
自分がYouTubeの動画を埋め込みたい場所に移動してブロックの追加を押します。
「カスタムHTML」を押します。
「カスタムHTML」が追加されました。
STEP2 : カスタムHTMLにコードを記載する
<div align="center">ここに先ほどコピーした動画のリンクを貼り付ける</div>現段階では上記のような状態になっていると思います。
「XXXXXXXXXXX」の部分は動画ごとに違った文字列になっています。
この記事では、分かりやすくするために「XXXXXXXXXXX」と記載しました。
コピーしたリンクの文字部分に読み替えながら進めてください。
embed/XXXXXXXXXXXの後、frameborder="0"の前にコードを追加します。
?loop=1&playlist=XXXXXXXXXXX追加すると以下のコードようになります。
無事、完成しました。
プレビューを押してループ再生されることを確認してみてください。
応用編
先ほどまでご紹介した方法やそれ以外にも沢山の指定の仕方がありますが、組み合わせる方法をご紹介します。
先ほどまでご紹介した方法を複数使用して動画を貼る方法をご紹介します。
今回は、センタリング・消音・ループ再生を組み合わせます。
センタリングのみ記述方法が違いますのでSTEP1でご紹介します。
消音とループ再生は記述方法が同じなのでSTEP2でまとめてご紹介します。
<div align="center">ここに先ほどコピーした動画のリンクを貼り付ける</div>embed/XXXXXXXXXXXの後、frameborder="0"の前にコードを追加します。
追加したい要素を「&」で区切ることで反映させることができます。
XXXXXXXXXXXのすぐ後は「?」です。
例として、センタリング・消音・ループ再生を組み合わせます。
?mute=1&loop=1&playlist=XXXXXXXXXXX
無事、完成しました。
プレビューを押してセンタリング・消音・ループ再生されることを確認してみてください。
コメント