YouTube埋め込み動画をレスポンシブ対応にする方法

    この記事は2分で読めます

    youtube

    ワードプレスにYouTube動画を貼付けた時に、そのまま貼ってしまうと、
    スマホなどで表示してみると、画面から大きくはみ出してしまいます

    PCでの表示はちゃんとされているので、
    スマホまでは気にしていない人もけっこういるんですよね(^_^;)

    でも、今は、PCよりもスマホでサイトを見る人の方が、
    圧倒的に多いので、ブログのテンプレートだけでなく、
    動画もサイズを自動調整してくれるレスポンシブ対応にしておきましょう。

     

    というワケで、今回は、
    埋め込みしたYouTube動画をレスポンシブ対応にする方法
    を紹介します。

    僕自身がCSSを未だによくわかっていないので(苦笑)、
    そんな人でもできるように、できる限り、具体的にわかりやすく解説していきます。

    CSSの設定

    まずは、こちらのコードをコピーしてください。

    .video-container {
    	position: relative;
    	padding-bottom: 56.25%;
    	padding-top: 30px;
    	height: 0;
    	overflow: hidden;
    }
    
    .video-container iframe {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    }

    参考にした記事はこちら↓

    参照:ワードプレス投稿に埋め込んだYouTube動画を簡単なCSSで、たった2分でレスポンシブ対応!

    コピーできたら、「外観」⇒「CSS編集」を選択。

    youtube01

    CSSスタイルシートエディターにさっきのコードを貼付けます。

    youtube02

    あとは、スタイルシートを保存すれば、CSSの設定は完了です。

    HTMLの設定

    HTMLの設定は、記事を書く時に、
    埋め込みコードを以下のコードで囲めばいいだけ。

    <div class="video-container">YouTube埋め込みコード</div>

     

    ちなみに、埋め込みコードの取得の仕方は、
    まず、埋め込みたい動画の下にある「共有」をクリック。

    youtube03

     

    次に、「埋め込みコード」と出るので選択し、
    そこに表示されるコードをコピーして、記事を書く時に貼り付ければOKです。
    (貼り付ける時は「テキストモード」にしてくださいね)

    youtube04

    このコードをさっきのコードで囲めば、
    画面に応じてサイズ調整してくれるレスポンシブ対応になります。

    試しに、この記事にも動画を貼っておきましょうか。

    実際の記事作成画面ではこんな感じ↓(ちょっと見づらいですが…)

    youtube05

    で、動画はこちら↓

     

    パソコンで見ても、スマホで見ても、ちゃんと最適なサイズで表示されているはず。

    以上で、YouTube動画のレスポンシブ対応は完了です。

     

    読んでいただき、ありがとうございました。

    ______________________________________________________________________________

    僕はアフィリエイトで月収40万を稼ぎ、
    自由な時間も得ることができましたが、
    もともとはただのコミュ障ニートです。

    仕事もできなかったし、コミュニケーションもすごく苦手でした。

    そんな何をやってもダメダメだった僕が、
    なぜネットビジネスで稼げるようになったのか?

    メルマガではそのヒミツをより詳しくお伝えしています。

    詳細については下の画像をクリック↓

    merumaga

    関連記事

    1. この記事へのコメントはありません。

    1. この記事へのトラックバックはありません。

    プロフィール

    prof1

    Author:だいき

    二次元・ファッションをこよなく愛する元ニート。そして重度のコミュ障(今はだいぶマシになった)。

    • 高校時代に友達0人のぼっちライフを満喫
    • 大学の卒業研究を二度ほどバックレる
    • 就職活動は全落ち(そもそもやる気ない)
    • 仕事での人間関係に病んでニートになる

    などなど、典型的ダメ人間エピソード多数。

    あまりに社会不適合過ぎたので、まともに働くことはあきらめ、超アヤシイと思いつつも、生きるための選択肢が他に無かったのでアフィリエイトに挑戦。

    数々の挫折を経験しながらも、約1年半後に月20万円稼ぐことに成功。

    今は自分の学んできた経験や知識を活かし、自己成長しながら自分の人生を自由に生きる仲間を作るための活動中。

    詳しいプロフィールと理念についてはコチラ↓

    だいきのプロフィール&理念

    だいきのぶっちゃけ人生レポート

    僕の残念人生を振り返りながら、ネットビジネスで稼ぐまでの道のりをレポートにしてみました。

    コレを読めば、僕の人となりとか成功の秘訣とかがほぼ全てわかるかと。

    jinseigyakutenrepo

    おすすめ教材

    osusumekyouzai

    初心者講座

    「アフィリエイトやってみたいけど、何からやったらいいかわからん…」という場合は、まずコチラをどうぞ。

    syosinsyakouza

    おすすめ漫画

    僕の好きなマンガまとめました。

    よかったら読んでみてください。

    comic

    Blog Ranking

    LINE@

    友だち追加数

    Twitter

    お問い合わせ

    質問・相談などあればこちらから↓

    mail