どうもナガサイです。
ワードプレスでブログを書いていくときにyoutubeの動画を埋め込みたい時はないですか？
ブログにyoutubeの動画を埋め込むだけで滞在時間も増えるしメリットが大きいです。
更にスマホサイズで動画を埋め込む方法も紹介しますね。
ワードプレスブログにyoutube動画を貼り付ける方法
まずはブログに貼り付けたい動画をyoutubeから探します。
記事中に埋め込みたい動画が見つかったら動画の下にある共有ボタンをクリック！
共有をクリックしたら「埋め込みコード」をクリックします。
そうすると動画の埋め込み用コードが出てきますのでコピーします。
コードをコピーしたら記事を開いて貼り付けます。
ワードプレスで記事を書く場合、ほとんどの人がビジュアルモードで書くと思いますが、この状態で動画の埋め込みコードを貼り付けると下の画像の様になります。
ビジュアルモードのまま貼り付けると動画が表示されないんですよね。
なのでコードを貼り付ける時だけテキストモードに切り替えます。
テキストモードに切り替えると「ビジュアルモード」の時に空白の行だった場所が と表示されます。
これは消さない様に注意してください。
消してしまうと空白の行がなくなってしまいます。
ではプレビューを確認します。
この様にテキストモードで貼り付けると動画が表示される様になります。
パソコンではこの様にちゃんと表示されますがスマホではどうでしょうか？
スマホでも動画を綺麗に表示したい時の方法
先ほど動画を埋め込んだ記事をスマホで表示してみましょう。
こんな感じです。
スマホのスクリーンショットで撮ってみたんですが、youtubeの動画が半分切れています。
スマホ対応になっていない状態ですね。
ここ最近ではスマホからのユーザーが多いのでここは直しておきましょう。
まず動画の埋め込みコードを貼る位置に下のコードを貼ります。
<div class="v-wrap al-c m30-b"></div>
コードの使い方はこんな感じです。
この状態でスマホを確認してみましょう！
スマホの画面内にyoutubeが収まりました。
これでばっちりですね。
ではまた。
