【WordPress】レスポンシブテーマでCSSコードの追加だけでYouTube動画をはみ出さずに表示させる方法

サイト作成
この記事は約2分で読めます。

WordPressのテーマを使用していて、YouTube動画がはみ出てしまい正しく表示されない場合があります。特にWordPressでなくても、CSSを編集できるサービスを利用している場合も同じです。

方法はいくつかありますが、今回紹介するのCSS、HTMLの追加だけの方法が簡単ではみ出ずに表示できたので、備忘録としてメモしておきます。

スポンサーリンク

CSSコードの追加だけでYouTube動画をはみ出さずに表示させる方法

以下の作業するだけでYouTube動画をはみ出さずに表示させることができます。

  • CSS編集画面にCSSコードを追加
  • 投稿画面でコードの間にYouTubeから取得したコードを貼る

これだけでYouTubeの埋め込みが画像サイズに変化するレスポンシブになります。

CSSにコードを追加

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

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

投稿画面に以下のコードを挿入する

<div class="video-container">
	YouTubeの埋め込みコード
</div>

参考 WEB DESIGNER WALL

表示結果

実際に貼ったら以下のように表示されます。

実際にスマートフォンやタブレットでこのサイトにアクセスしてみても良いですし、パソコンならば画面の縮小、拡大をしてみてください。

貼った動画のサイズを指定したい場合

通常の埋め込みをそのまま貼って表示させた場合は、幅560px、高さ315pxとなりますので、「width=”560″ height=”315″」の部分を自分のサイトに合わせたサイズに変更して投稿画面に貼ってみてください。このサイトでは変更後以下の通りに表示されました。
幅がぴったりになっていますね。

スポンサーリンク

まとめ

ぜひ、WordPressを始めCSSを編集できるサービスを利用している場合も同じですので、YouTubeに対応していないレスポンシブテーマで試してみてださい。

コメント

  1. クールなWordPressフリーテーマMusicPress より:

    […] [解決済み] 特定の親カテゴリーに属する子カテゴリー (12 件の投稿) はっちゃんのWordPressセミナー [WordPress]パスワード付き投稿の入力画面をオリジナルにする方法が、いつの間にか変わってたので直した 第21回WordBench神戸 ~ Gitとフックで始める新しいWordPressライフ Co-EdoでWordPressの勉強会をしてきました AWS Elastic BeanstalkでWordPressを始める 30ワードプレスのテーマはHTML5 海外のフリーのWordPressテーマいろいろ。 【WordPress】レスポンシブテーマでCSSコードの追加だけでYouTube動画をはみ出… […]

  2. Wordpressでのレスポンシブ化に関して、改善したところを挙げてみる | 食わず嫌い記 より:

    […] 【WordPress】レスポンシブテーマでCSSコードの追加だけでYouTube動画をはみ出… […]

  3. テーマチェンジ | +αα より:

    […] 動画がうまく貼れなかったから、ここ見て修正。 […]

タイトルとURLをコピーしました