iPhoneとAndroidサイトにYoutubeを表示

スマートフォン用のサイトにYoutubeを埋め込み、画面幅１００％表示、iPhoneとAndroidで表示可能。

■HTML

<div class=”youtube”>
<iframe width=”640″ height=”480″ src=”//www.youtube-nocookie.com/embed/xxxxxxx” frameborder=”0″ allowfullscreen></iframe>
</div>
■Youtubeは動画サイズ大きめで、プライバシー強化モードを使う。
■CSSに追加

/*———- youtube ———-*/

.youtube{
position:relative;
padding-bottom: 56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.youtube iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

※ネット上から集めた情報のメモです。