YouTube動画を埋め込む時にセンタリングする方法

Blogは資産
スポンサーリンク
しぶやん

公務員になるがもっと自由に生きたい!と感じ退職。その後、金銭的などん底を味わい、お金に関する勉強をし浮上。その後、いくつかの事業・投資による複数の収入の柱を構築。
▶︎お金持ち=(収入ー支出)×運用利回りの公式が理念。
資金が少なくても、豊かになれる道を紹介します。

スポンサーリンク
スポンサーリンク

最近、YouTubeで発信する人がどんどん増えてきています。

もちろん、せっかく作った動画ですから、ブログやHPなどに埋め込みたい!と、あなたも思ったことがあるはずです。

もちろん、ワードプレスを利用している人は、YouTubeで生成されたリンクを記事内にコピペすれば、自動に埋め込むことができます。

ところが…

という風になってしまいます。

OLちゃん
OLちゃん

えぇーーーそんなの嫌よ。

せめてセンタリングで埋め込みたいよ!

そこで、ここでは、

YouTube動画を埋め込む時にセンタリングする方法

を紹介します。

 

YouTube動画を埋め込む時にセンタリングする方法

YouTube動画をセンタリングする方法はいくつかありますが、ここでは、最も簡単GoogleChromeにもIE8にも対応した方法を紹介します。

レスポンシブ対応が気になるって方もいるようですが、WordPressのテーマCocoonでは問題なく表示されていました。

他のテーマでは検証していない点、ご了承ください。

実際にその方法を紹介していきますが、こうした作業に慣れている方は、次の部分だけ見ると問題解決できると思います。

 

YouTube動画をセンタリングで埋め込むコード

<div align="center">
YouTubeの埋め込みコード
</div>

たったこれだけです。

PCで見ると埋め込んだ動画がセンタリングされているのがわかります。

 

僕はFXをしている人なので、この動画を埋め込みました。

FXって何や?って方は、この動画の右下に表示される金額を見て笑っておきましょう。

ワードプレス上でコードをどう処理するのか、具体的な手順

まず、HTML用の新しいブロックを追加します。

あたらしくできた、HTML用のブロックに、次のようにコードを書きます。

上の青枠内からコピペすればOKです。

次に埋め込みたい動画の埋め込みコードを取得します。

このような画面が出てきますから、埋め込みをクリック

すると、難しそうな記号が出てきますが、そんな事は気にせず、コピーをクリック。

この時にPCは、上の難しそうな記号を記憶していますから、さきほどのYouTubeの埋め込みコードっていう部分にペーストします。

コピペが完了するとこの様になります。

<div align="center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/URBvQn4Q22g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>

 

ちょっとした作業をするだけで、気持ちよくページを作ることができます。

参考にしていただけたら、嬉しいです。

なお、<center>〜</center>で囲む方法もありますが、GoogleChromeでは、非推奨だということを耳にしたことがあるので、僕は使用をさけています。

 

ブログを書きたいけれども時間がない!っていうあなたへ

お金があれば、必ずしも時間が作れるかどうかは、個人差があるものです。

でも、毎月、5000円でもあなたの資金が増えたら、気持ちの余裕も生まれるのではないでしょうか。

僕は、教師を辞めてからお金の問題に直面し、お金と時間との関係でとても辛い思いをしてきました。

ですから、PTRでは、あなたの資金を増やすFX自動売買ツールを無料で配布しています。

3万円から5万円程度の投資額があればスタートさせることができます。

こちらに、5万円を入金してツールにお任せして運用した11月の結果を掲載しています。

初めてFXをするという利用者さんも全員利益が出ています。

ツールは無料で配布しています。
欲しい方は、
LINE@にご登録ください。
ご質問などもどうぞ…

友だち追加

スポンサーリンク
スポンサーリンク
Blogは資産
スポンサーリンク
PTR Poor To Rich

コメント