ホームページ【管理・集客・広告】お気軽にご相談下さい!土日祝日も対応可能!!

中小企業・個人事業主専門
WEBコンサルタント

お問い合わせ

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

WordPress

WordPressのテーマによっては、YouTube動画がはみ出てしまい正しく表示されない場合があります。

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

スポンサーリンク

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>

表示結果

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

君を乗せて(天空の城ラピュタ) – Laputa Carrying you (English Version)

スマートフォン、PC画面で確認してみて下さい。

参考 http://webdesignerwall.com/tutorials/css-elastic-videos

まとめ

ぜひ、YouTubeに対応していないレスポンシブテーマで試してみてださい。

HaLPosTは、中小企業・個人事業主専門のWEBコンサルタントです!

ホームページからの集客増やしませんか?

■ホームページ作成
■ホームページ管理・修正・ページ追加
■WEB広告
■その他(プリンターの設定やメールの設定など)お任せ下さい。

大手では、頼みづらい細かい依頼もお受けすることが出来ますのでお気軽にご連絡ください。土日祝日も対応可能です!

WordPress
スポンサーリンク
HaLPosTをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
HaLPosT

コメント

  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. テーマチェンジ | +αα より:

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

  4. 埋め込んだYouTube(ユーチューブ)動画をレスポンシブにする方法 より:

    […] gle = window.adsbygoogle || []).push({}); 参考にさせてもらったのは、こちらのサイト。 【WordPress】レスポンシブテーマでCSSコードの追加だけでYouTube動画をはみ出さずに表示させる方法 | HaLPosT […]

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