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

 
 

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>

表示結果

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

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

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

まとめ

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

スポンサーリンク

この記事が気に入ったら
「いいね!」
お願いします!!

HaLPosT最新情報をお届けします

Twitterで【HaLPosT】をフォローしよう!



運営者
 

HaLPosT運営者

 
このサイトは、WEBコンサルタントとして仕事上のことをメインに書いているブログです。その他、WEBツール、自分のメモ、WordPressの記事を書いています。
 

【HaLPosTでは、経営全体をWEBと共に考えながらコンサルティング致します!】

 
以下、主な例として

  • 企業、個人ホームページサイト作成
  • 企業、個人ブログサイト作成
  • ホームページ、ブログ作成後(他社作成含む)の管理、更新
  • 企業様、個人様のWEB相談役

です。
 
その他ご相談内容としましては

  • WEB広告の運用方法
  • SNS運用方法
  • ポスターの作成、デザイン
  • 名刺作成、デザイン
  • ロゴ作成
  • ホームページ、ブログの更新方法の指導

など、依頼は多岐に渡ります。
 
関わった主な業種は

  • 飲食
  • 不動産
  • マッサージ店
  • ナイトワーク
  • ホテル
  • 宿
  • バー
  • ガソリンスタンド

などに関わらせてもらいました。
 
個人様では

  • 企業営業マン
  • ブログ運営者
  • ネットショップ運営者

です。
 
HaLPosTでは、面談にて詳細にお話をお伺いして、企業様、個人様にあったWEB戦略を提案いたします。

フォローする:

スポンサーリンク

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

  1. 名前:クールなWordPressフリーテーマMusicPress 投稿日:2013/02/08(金) 17:29:17 ID:b2479530b 返信

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

  2. 名前:Wordpressでのレスポンシブ化に関して、改善したところを挙げてみる | 食わず嫌い記 投稿日:2013/06/13(木) 20:37:33 ID:72993cefe 返信

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

  3. 名前:テーマチェンジ | +αα 投稿日:2014/08/23(土) 18:54:17 ID:0a7402d5f 返信

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

  4. 名前:埋め込んだYouTube(ユーチューブ)動画をレスポンシブにする方法 投稿日:2015/07/08(水) 11:58:38 ID:fcd6e4e5f 返信

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