youtube埋め込みタグのレスポンシブ対応
あまりcssとhtmlに詳しくないので、とりあえずコピペできるようにする。
<div> <iframe src="//www.youtube.com/embed/hogehogehoge" frameborder="0" width="560" height="315" allowfullscreen></iframe> </div>
iframeの典型的な埋め込みコード、このままコピペすればyoutube自体は参照が可能。
ただし、スマホで観た場合はiframeのサイズになってしまうので横幅がはみ出してしまいレスポンシブ対応が上手くいかない。
<div style="position:relative; width:100%; padding-top:56.25%;"> <iframe src="//www.youtube.com/embed/hogehogehoge" frameborder="0" width="560" height="315" allowfullscreen style="position:absolute;top:0;right:0;width:100%;height:100%;"></iframe>
直接スタイルに書いてしまっているが、スタイルでまとめればこのまま使えると言う感じ。