読者です 読者をやめる 読者になる 読者になる

WAROCOM

Apple製品を中心にアプリ・Web・ネット・ガジェット・クレジットカードを紹介しています

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

ブログ運営 ブログ運営-カスタマイズ

スポンサーリンク

f:id:warorince:20150807192729j:image

まいど〜

 
いやー動画をブログで結構紹介するんで自分にはこれは必須だったんですよね
 
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から直接埋め込みコードをコピペしないと適用されないので気をつけて下さい

 

YouTube 成功の実践法則 53

YouTube 成功の実践法則 53

Copyright© WAROCOM All Rights Reserved.