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に対応していないレスポンシブテーマで試してみてださい。
コメント
[…] [解決済み] 特定の親カテゴリーに属する子カテゴリー (12 件の投稿) はっちゃんのWordPressセミナー [WordPress]パスワード付き投稿の入力画面をオリジナルにする方法が、いつの間にか変わってたので直した 第21回WordBench神戸 ~ Gitとフックで始める新しいWordPressライフ Co-EdoでWordPressの勉強会をしてきました AWS Elastic BeanstalkでWordPressを始める 30ワードプレスのテーマはHTML5 海外のフリーのWordPressテーマいろいろ。 【WordPress】レスポンシブテーマでCSSコードの追加だけでYouTube動画をはみ出… […]
[…] 【WordPress】レスポンシブテーマでCSSコードの追加だけでYouTube動画をはみ出… […]
[…] 動画がうまく貼れなかったから、ここ見て修正。 […]
[…] gle = window.adsbygoogle || []).push({}); 参考にさせてもらったのは、こちらのサイト。 【WordPress】レスポンシブテーマでCSSコードの追加だけでYouTube動画をはみ出さずに表示させる方法 | HaLPosT […]