今回のWebサイトリニューアルを行う途中で躓いたことのメモ書きです。

自分の自作ゲームの紹介ページにて、Youtubeのプレイ動画を埋め込みで載せることにしました。
ページはPCとスマートフォン両方に対応させます。

Youtube動画の埋め込みタグを対象となるページのHTMLファイルにコピー＆ペーストするだけで簡単に動画を設置できます。
PC上のブラウザで閲覧するときは問題ありませんが、スマートフォンで閲覧すると見事に画面からはみ出てしまいます。

はみ出ないようにするにはどうするべきか？

答えは明確で、表示領域を超えないサイズで埋め込み動画を表示できればよいのです。
PCブラウザでは大きめに、スマートフォンブラウザでは画面幅に合わせて小さめに表示できるのが理想です。
単にウィンドウ幅に合わせるだけでは動画が巨大に表示されてしまう可能性があるため、最大幅を指定するのが望ましいでしょう。

これは次の２ステップを踏むことで実現できます。

CSSに以下定義を追加

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-wrapper {
	width: 420px;
	max-width: 100%;
}

埋め込みタグをDIVで囲む

<div class="video-wrapper">
    <div class="video-container">
        <iframe width="420" height="315" src="https://www.youtube.com/embed/YmXFut0HqlQ" frameborder="0" allowfullscreen></iframe><br>
    </div>
</div>

デモはこちらから。

これはWordPressのようなブログにも同様に使えます。
ややトリッキーな方法ではありますが、PCとスマートフォンで最適なサイズで表示させるのには不可欠なテクニックになるのではないかと思います。

参考サイト様

YoutubeやHTML5video等の埋め込み動画のサイズをwindow幅に合わせて動的にリサイズ/可変にする方法
埋め込んだYouTube動画をCSSでレスポンシブ対応にする