facebooktweetはてブLINEPocketfeedlyおはようございます。最近はブログを朝・夜と2回更新しています。見ると、早起きが得意で「朝活」と認識されそうですが、早起きは苦手なので、夜にまとめて書いて予約投稿しています。今回はYoutubeや動画をサイトに埋め込む際にレスポンシブ対応する方法を書いていきたいと思います。<iframe>もしくは<video>タグを使って動画を埋め込むことが一般的だと思うのですが、ちょっとの工夫でタブレットやスマホで見たときも、縦横比を維持したままきれいにサイトに埋め込むことができます。実際に埋め込んだ動画を各端末で確認まとめまずはサイトにYoutube・動画を埋め込むまずは、HTMLでサイトにYoutubeもしくは動画を埋め込みます。サイトに埋め込みで表示されるiframeをコピーし、下記のようにdivで囲ってからサイトに貼り付けます。allowfullscreen></iframe></div>通常の動画の場合サーバーなどに動画を予めアップロードし、下記のようにdivで囲ってからサイトに貼り付けます。※動画をアップロードしたパスに合わせて書き換えが必要です。上記のままだと、どの端末から見ても指定した幅・高さで表示されてしまうので、タブレットやスマートフォンでははみ出す可能性があります。下記のCSSを追加することで、どの端末から見ても縦横比を維持したまま表示できます。【iPhone8から確認】どの端末のサイズから見ても縦横比を維持したままきれいに表示できました。まとめ動画をレスポンシブで表示するには、この方法が一番簡単ですね。videoタグやiframeを予めdivで覆っておくだけで可変にできるので、便利です。フロントエンドエンジニア・デザイナーの社員Aです。株式会社ユニバースです。ホームページデザイン、ECサイトデザインなどWEB制作のトータルサポートを行っております。ホームページ制作やネットショップ運営代行などwebに関するご相談・お見積は、お気軽にお問い合わせください。人気記事Posting....。