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 […]