2023.02.05

【WordPress】 YouTubeの動画アイキャッチが、スマホ表示で左右が切れてしまう問題の対処法

ひつじ

JIN:R運営チームのひつじです！

せっかくYouTubeのアイキャッチ綺麗につくってるのに、スマホでは左右が切れてしまうぞ。。

WordPressの新エディター（Gutenberg）でYouTube動画を貼り付けると

PCでは綺麗にアイキャッチ表示されるのに、スマホではアイキャッチ左右が途切れてしまう問題があります。

こんな感じで、左右が切れてしまいます….

これはワードプレスが動画に「height」と「width」を固定値で付与するために起きる問題となっています。

せっかくアイキャッチを作り込んでいるのに、スマホではどうしても綺麗になりません。この解決策を考えたいと思います。

※ 結構ややこしいので、しっかり読んでもらえると幸いです。

ひつじくん

JIN:R側で対応できるかも考えましたが、WordPressテーマ側で一括対応すると困る人も出てくるので、個別対応した方がいいという見解で

スマホでもYouTube動画を綺麗に表示する方法

サンプルコードをGutenbergにコピペ

JIN:Rの場合は、以下のコードをYouTube動画を貼りたい場所にコピペしてください↓

<!-- wp:jinr-blocks/fullwidth {"fullWidthSize":"d\u002d\u002dfullwidth-article","fullWidthBgColor":"rgba(255,255,255,0)","displayDeviceAttribute":"jinr-display-pc","displayDevicePCAttribute":"jinr-display-pc"} -->
<section class="wp-block-jinr-blocks-fullwidth b--jinr-block b--jinr-fullwidth-container jinr-display-pc"><section class="b--jinr-fullwidth" style="background-color:rgba(255,255,255,0)"><div class="d--fullwidth-article d--fullwidth-pad0 d--fullwidth-pad0-sp t--main-width" style="color:#112375"><!-- wp:html -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/iL8ZrWKxlaY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- /wp:html --></div></section></section>
<!-- /wp:jinr-blocks/fullwidth -->

<!-- wp:jinr-blocks/fullwidth {"fullWidthSize":"d\u002d\u002dfullwidth-article","fullWidthBgColor":"rgba(255,255,255,0)","displayDeviceAttribute":"jinr-display-sp","displayDeviceSPAttribute":"jinr-display-sp"} -->
<section class="wp-block-jinr-blocks-fullwidth b--jinr-block b--jinr-fullwidth-container jinr-display-sp"><section class="b--jinr-fullwidth" style="background-color:rgba(255,255,255,0)"><div class="d--fullwidth-article d--fullwidth-pad0 d--fullwidth-pad0-sp t--main-width" style="color:#112375"><!-- wp:html -->
<iframe width="320" height="180" src="https://www.youtube.com/embed/iL8ZrWKxlaY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<!-- /wp:html --></div></section></section>
<!-- /wp:jinr-blocks/fullwidth -->