WAROLOG

ワロリンスの雑記ブログ

【カスタマイズ】YouTube動画をレスポンシブ対応にする方法

f:id:warorince:20150807192729j:image

まいど!

動画をブログで結構紹介するんで自分にはこれは必須だったんですよね

YouTubeの動画は簡単に埋め込み出来るけど、>スマホからだと縦と横の比率がおかしいので、これを改善できればなぁと思ってたんすよねぇ〜

んで、YouTubeの動画をレスポンシブに対応させればいいんじゃね?!

って事でやってみました!

 

YouTube動画をレスポンシブ化

レスポンシブとは、最適な大きさで表示してくれる事

 

CSSの設定

ダッシュボード→デザイン→📱→ヘッダ→タイトル下と進んで下記のコードを入れる

<style type="text/css">
 .movie-wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

 

PC版でやる場合は上下にある、このコードは必要ないので取り除いてください

<style type="text/css">
</style>

 

HTMLの設定

記事にYouTubeの埋め込みコードを下記のコードに囲んで投稿して下さい 

<div class="movie-wrap">
ここにYouTubeの埋め込みコード
</div>

こんだけ!

これでYouTubeの動画がレスポンシブに対応される! 

こんな感じ↓

 

まとめ

はてなブログのYouTube貼り付けツールには対応してないので、YouTubeから直接埋め込みコードをコピペしないと適用されないので気をつけて下さい