Youtube動画をレスポンシブで埋め込むcss設定方法

 

Youtubeの動画をブログに埋め込むとき、今まではサイズを固定する方法でした。

画面の大きさに合わせて、動画のサイズも自動で変更するようにレスポンシブCSSを追加しました。

Youtube動画の埋め込み

Youtubeの動画を埋め込む時は、通常埋め込みたい動画の画面から共有用のコードを取得します。

このまま貼り付けても動画再生可能ですが、貼り付けサイズが固定されていますので、スマホやブラウザのサイズによっては、はみ出てしまいます。

スマホなどさまざまな画面サイズに合わせて、自動でリサイズしてくれるCSSを設定しました。

CSSコードを追加する

Seesaaブログの管理画面から、[デザイン]→[デザイン設定]→[自分の使っているCSS名]をクリックして編集画面を開きます。

次のコードを追加します。クラス名は、自分で分かりやすいものに変更して使ってください。

/* 動画埋め込み */
.movie-wrap {
width: 500px;
max-width: 100%;
}
.movie-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.movie-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

[.movie-wrap]で全体の最大幅を指定しています。最大幅を指定せず、完全可変させたい場合は、削除してください。

記事中の埋め込みコード記述法

記事中に埋め込むコードは、divタグにクラス指定をして使います。

<div class="movie-wrap">
  <div class="movie-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/FlKVzLe-vys" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

このコードで埋め込んだ動画がこちら ↓

PCブラウザでもスマホで見てもリサイズされて綺麗に見れます。

まとめ

え~設定しては見ましたが、よく考えたら自分のサイトを、まだレスポンシブ化してないので、あまり意味はなかったような気がします^^;

HTMLやCSSの勉強をして、少しずつデザイン変更やテクニック的なことも覚えているので、レスポンシブ化も将来的には実践していきたいですね。

Amazonでお得に買う方法

ネット通販の代表格Amazon。Amazonプライム会員に登録すると送料無料の他にも様々な特典がついてきます。

そんなAmazonでの買い物を、さらにお得にするなら、Amazonギフト券への購入チャージをおすすめします。

 

現金でチャージするたびに、チャージ額 × 最大2.5%分のポイントがもらえます。

Amazonプライム会員の方なら是非活用して、更にお得に利用しましょう。

CHARGE NOW

コンビニ・ATM・ネットバンクが対象

1円単位で購入可能

スポンサーリンク

フォローする