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

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

YouTube_umekomi_eye

Youtubeの動画をブログに埋め込むとき、今まではサイズを固定する方法でした。
画面の大きさに合わせて、動画のサイズも自動で変更するようにCSSを追加しました。


Youtube動画の埋め込み

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

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

スマホなどさまざまな画面サイズに合わせて、自動でリサイズしてくれる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の勉強をして、少しずつデザイン変更やテクニック的なことも覚えているので、レスポンシブ化も将来的には実践していきたいですね。



posted by taks at 12:38 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。