Youtube動画などのレスポンシブ対応
レスポンシブテンプレートを使用中で、自由記入欄などを利用してYoutube動画を埋め込みたい場合、必ずレスポンシブ対応が必要となります。
下記のようにHTMLタグとスタイルシートを設定することで、スマートフォンで閲覧した場合でもはみ出ることなく綺麗に表示されます。
●HTMLタグ
<div class="video">
<iframe width="560" height="315" src="動画URL" allowfullscreen></iframe>
</div>
●スタイルシート
.video {
position: relative;
height: 0;
padding: 0 0 56.25%;
overflow: hidden;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}