スマホ画面でYoutube動画の表示サイズを自動調整（レスポンシブ）する方法

ブログをスマホで閲覧するとき、動画・画像が画面からはみ出しているとカッコ悪いですよね。CSSコードを書き加えるだけで、カンタンに解決できますよ。初心者さんにもわかりやすく紹介します。

テーマの編集をクリックします。

ご使用しているテーマが選択されていることを確認します。（以下、テーマ「BlogPress」を例とします。）

テンプレートのスタイルのうち、「style_sp.css」をクリックします。ちなみに、style_spの「sp」はスマートフォンという意味です。同様に、この上の「style_pc.css」の「pc」はパソコンという意味で、以下と同様の処理をすることでパソコンでの表示サイズも自動調整されます。

「style_sp.css」の画面が開きます。

下記CSSコードをコピーし、最下部に貼り付けし、「ファイルを更新」をクリックします。

iframe {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
}

スマホの画面を起動して、動画が正しいサイズで表示されているか確認しましょう。