注目キーワード
  1. SEO
  2. 外注
  3. 有料テーマ
  4. 2ティア

ユーチューブのレスポンシブ用CSSコードでブログに最適化!

動画の重要性が求められるようになり、ユーチューブをブログに貼り付ける人が増えてきました。

でもスマホとPCで動画のサイズが最適化されておらず、動画が見切れてしまっている人がたくさんいます。(レスポンシブ対応できていない)

せっかく動画を貼るなら美しいブログを維持したいですよね。

ユーチューブのサイズを最適化させるCSSおよびhtmlコード

以下のコードをCSSに記載して下さい。

.video-youtube {
position: relative;
height: 0;
padding: 30px 0 56.25%;
overflow: hidden;
}

.video-youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

paddingで高さは30px、横は0としています。そのため動画が横に余白がなくぴったりはまる形となっています。
もしほんの少し両端に余白が欲しい人は0の数字を変え自分が最適だと思う数字に変更して下さい。

ユーチューブは横と縦の比率が16:9であるため、paddingを56.25%(9/16×100)と指定しています。そのためこの数字は変えないで下さい。

このコードをCSSに記載した後、htmlを以下のように記載します。

<div class=”video-youtube”>ここにユーチューブの共有を押し公開コード<iframe>から</iframe>までを貼り付ける</div>

要は頭に<div class=”video-youtube”>とお尻に</div>を付け足せばいいだけとなります。

コード入力前後

CSSおよびhtmlを設定することで、以下のように設定後はデザインが崩れていないことが分かります。

ゆっけ
コード前は大きすぎて白い余白がたくさんあゆのに対して、コード入力でしっかりフレーム内に収まっていることがわかりますね

ユーチューブ最適化用コードまとめ

SEOの観点からみてもユーチューブ等の動画を記事に貼ることは非常に重要です。

動画を入れることで読者の理解力が高まるなら是非動画を導入していきましょう。

ただ、動画をそのまま貼り付けただけでは、せっかくの綺麗なデザインが崩れてしまう場合があります。

崩れたデザインを使えば、読者の離脱率が逆にあげる原因にもなりかねません。

デザインが崩れるから必ず自分でCSS、htmlを設定するようにしましょう。

ブログの運営で困っている方の相談を随時受け付けています。

アフィリエイトやSEOの相談以外にも、イラストやアイコン作成など様々なことに対応可能です。

是非気軽にご相談ください。

ゆっけの相談窓口

ゆっけ
1人で悩んでいてもなかなか成果に結びつきません。
気軽にご相談くださいね!
ツイッターはこちら➡ゆっけ
>本サイトの趣旨

本サイトの趣旨

私のサイトは誰もが理解できることをモットーに記事を作成しています。
SEO上、共起語をいれ長めの文章が好まれますが、初心者にはヘビーであり、すぐお腹一杯になります。
そのため1つの記事に関して短く平易な文章で書くことを意識しています。
これからアフィリエイトを始めるという方の支えになることができたら幸いです。

P.S. アイコン作成なども随時受け付けてます

CTR IMG