You-Tube動画をスマホ表示で綺麗に埋め込む!レスポンシブ対応する方法

「ブログに動画を埋め込みたい!」

と思うことよくありますよね。

最近では、ブログ滞在時間を引き伸ばし、SEO的にも効果があると言うことから、ユーチューブ動画を記事内に埋め込む方が増えています。

だけど、スマホで表示された記事を見てみると 、画面から動画がはみ出して見栄えが悪いと感じた事はありませんか?

例えば、こんな感じ。

sumaho-1

 

「スマホ表示の時も綺麗に動画を埋め込みたい!」

と思っている方も結構多いはず。

サイズを変更し、小さくするとPC画面で表示された時の見栄えが悪くなります。

そんな場合はYou-tube動画をレスポンシブ対応にすると綺麗に表示されますよ。

そこで本記事では、ユーチューブ動画をレスポンシブ対応させて、スマホ表示でも綺麗に埋め込む方法をご紹介します。

難しいHTMLやCSSの知識は一切必要ないので初心者の方も安心して実践して下さいね。

You-tube動画をレスポンシブ対応にする方法

You-tube動画をレスポンシブ対応にするのは非常に簡単です。

今回はワードプレステンプレートで人気の「TCD」を使って解説していきます。

まずはワードプレス編集画面から外観⇒テーマ編集⇒カスタマイズクリック。

一番下の「追加CSS」をクリックします。

次に、デフォルトで表示されている文言をすべて消して、以下のタグを貼り付けて下さい。

iframe{ width:100%; }
sumaho-3

「保存して公開」をクリック!

以上です。

超簡単ですよね^^

 

ちなみにスマホではこのように変更されました。

sumaho-2

先程と比べるとスマホ内にきれいに収まっていますよね。

まとめ

以上、ユーチューブ動画をレスポンシブ対応させる方法をご紹介しました。

たった一行のコードを入力するだけなのでとても簡単ですよね。

特にトレンドブログを運営されている方は動画を貼り付ける事も多いと思います。

なので、この機会に是非変更しておきましょう!

僕が副業アフィリで毎月50万円以上稼いでいるヒミツを

無料メール読者さん限定で公開しています。

なぜ、時間がない副業アフィリエイターでも
毎月50万円以上を稼ぐことが出来るのか?


僕が200万円以上投資して得たスキルと実践で得たテクニックを
超初心者の方でもすぐに実践出来るよう噛み砕いて解説しています。

 

メール講座では、パソコンド素人だった僕が


・ゼロから抜け出した方法


・3ヶ月後に10万円稼いだ方法


そして毎月継続して50万円以上稼ぎ続けているテクニック

を惜しみなく解説しています。

 

さらに

・わずか10記事で累計100万円以上稼ぐブログ運営法


・自分で1記事も書かずに毎月安定して10万円以上稼ぐ外注戦略

も期間限定で公開します。

 

かなり、再現性が高い手法ので今すぐ実践して下さいね。

 


*登録後の解除もワンクリックで簡単に出来るので気軽にご登録お願いします♪

2 件のコメント

  • 須賀 ともひろ 様、初めまして。
    ランキングからお邪魔しました、ミコと申します。

    Youtube動画をこんなに簡単に、綺麗に貼れるんですね!
    すごすぎます・・・!!
    ちょっとこれはみんなに教えたい!

    しかし私のブログには貼れるような動画も無し。。。
    このページへのリンクを貼らせていただいてもよろしいでしょうか。
    突然訪問して不躾なことを書いてすみません。
    ちょっとそれくらい驚いています。。。

    とりあえず応援させていただきます。
    そしてまたお邪魔させていただきます。
    ありがとうございます!!

    • ミコ様

      ご訪問ありがとうございます!

      今回ご紹介した動画レスポンシブ対応の仕方はメチャクチャ簡単なので是非参考にして下さい。
      また、共有も全然OKなのでお好きにどうぞ^^

      今後共宜しくお願い致します。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA