・動画レスポンシブ
ユーチューブ動画の埋め込みを画面サイズに合わせて可変させるやりかた。 基本的にサイトのページサイズ一杯に広がる。狭くなればその分だけリサイズする。 つまりスマホ対応動画。
参考サイトさん
「Youtubeの埋め込み動画をレスポンシブに対応させる方法」WebClips_Design
「ユーチューブ動画の埋め込みをCSSでレスポンシブ対応する方法」HAM MEDIA MEMO
やりかた
・動画を貼りたいページで
<div class="movie-wrap">動画の貼り付けコード</div>
とする。・テンプレの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%; }と記載する。
