【作画】埋め込み動画をレスポンシブ化する

  • ブックマーク
  • Feedly
  • -
    フィード

埋め込み動画をレスポンシブ化する

YoutubeとVimeoをブログに掲載することが多いのですが、wp-block-embedでCSSのカスタマイズをすると、どうやらブログカードまで一緒にレスポンシブ化されてしまい、上下に余白が出来るのが気になっていた。

何かと調べてみると、wp-block-embedでCSSを書き換えてやるのではなく、youtubeとvimeoにそれぞれクラス指定をしてやれば良いということが分かった。

Youtube

左が変更前、右が変更後のページ。iframeの縦横比が改善された。

CSSに以下を記載

（1）CSSに以下を追記

.youtube-container { 
padding-bottom:56.25%;
position:relative;
overflow:hidden;
}

.youtube-container iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

自分のブログだと、.youtube-containerというclassが始めから割り当てられていたので、上記のCSSで事足りた。

Vimeo

左が変更前、右が変更後のページ。上下にあった無駄な余白を削除した。

function.phpに以下を追記

vimeoの埋め込みにclassを指定をしたい。何処かのページを参考にさせてもらったけど、参照元のURLを忘れた。以下のソースで”vimeo”の所を変更すれば、他の投稿サイトでもレスポンシブ化に対応できるかも。

//iframeのレスポンシブ対応
function wrap_iframe_in_div($the_content) {
  if ( is_singular() ) {
    //vimeo動画にラッパーを装着
    $the_content = preg_replace('/<iframe[^>]+?vimeo\.com[^<]+?<\/iframe>/is', '<div class="vimeo-container"><div class="vimeo">
//iframeのレスポンシブ対応
function wrap_iframe_in_div($the_content) {
if ( is_singular() ) {
//vimeo動画にラッパーを装着
$the_content = preg_replace('/<iframe[^>]+?vimeo\.com[^<]+?<\/iframe>/is', '<div class="vimeo-container"><div class="vimeo">${0}</div></div>', $the_content);
}
return $the_content;
}
add_filter('the_content','wrap_iframe_in_div');
</div></div>', $the_content);
  }
  return $the_content;
}
add_filter('the_content','wrap_iframe_in_div');

CSSに以下を追記

.vimeo { 
padding-bottom:56.25%;
position:relative;
overflow:hidden;
}

.vimeo iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
　
Wordpress レスポンシブ化