WordPress：モバイル機器でYouTubeの動画が切り捨てられずに表示されるようにする

WordPress(WordPress）でYouTubeの動画を挿入すると、デスクトップ（PC）では、正しく出モバイル機器では、画面全体が出ず一部だけ切り詰められ表示される場合があります。 この問題が発生すると、CSSコードでYouTubeの動画を挿入が可能です。 その後、挿入された映像が反応型で動作し、モバイル機器でも、画面サイズに合わせて動画の幅が調整されるようにすることができます。

WordPressにYouTubeの動画を挿入する - Gutenberg エディタ

WordPressがバージョン5に更新され、デフォルトのエディタが古典的なエディタ（Classic Editor）で Gutenberg エディタ（Gutenberg）に変わりました。 Gutenbergでは、YouTube映像や非メオ（Vimeo）映像を簡単に追加することができます。

ブロックエディタ（Gutenberg）でブロックを追加アイコン（プラス記号）をクリックして 埋め込み> YouTubeをクリックします。

これにより、次のようにYouTubeのビデオを置くことができるブロックが追加されます。

「ここに組み込まするURLを入力してください...」にYouTubeのビデオ共有のコードを入力して、「挿入」をクリックすると、映像が追加されます。 YouTubeのビデオ共有のコードは、共有するYouTubeの映像ページで「共有」ボタンをクリックして、表示されているコードをコピーします。

開始時刻を設定するには、「開始時刻」オプションをチェックするようにします。 この方法で、YouTubeの映像や雨メオ映像（Facebook 映像も可）を挿入すると、モバイル機器でも切り捨てられずに反応型で動作します。

例として、この方法でドロールジャクの「新世界から」第4楽章演奏を挿入してみました。

HTMLコードでYouTubeの動画を追加する方法

古典的なエディタを使用するか、上記の方法を利用することができない場合は、HTMLコードにYouTubeのビデオを挿入することができます。 ページビルダーにYouTubeの映像エレメントを提供していない場合は、ユーザー定義のHTML要素を利用することができます。

※ほとんどのページビルダーでは、YouTubeの動画を挿入することができるエレメント（要素）を提供しています。 Newspaper テーマはニュース、マガジンサイトに特化されてそうなのか分からなくても、YouTubeの映像を挿入することができる要素を提供していないようです。 （YouTubeのプレイリストを追加することができる要素は、提供します。）そのような場合Custom HTML要素を利用して動画を共有することができます。

まず、次のようなCSSコードを WordPress テーマのスタイルシートファイル（style.css）に追加するようにします。 （または、 テーマのデザイン（バージョンによって、ルックス'）> カスタマイズする > 追加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%;
}

.entry-content img,
.entry-content iframe,
.entry-content object,
.entry-content embed {
max-width: 100%;
}

今、個々の文でYouTubeのビデオを挿入すると、次のように

<div class="video-container"> 동영상 Embed 코드 </div>

挿入しようとする動画挿入コードは、YouTubeの動画で 共有>埋め込みをクリックして、コードをコピーするようにします。

たとえば、共有したいYouTubeの動画ページで、次のようにiframeコードをコピーします。

そして WordPress ダッシュボードの記事を編集（もしくは文を書く）画面で、「ビジュアル」と「テキスト」モードの中から "テキスト"モードを選択した後、コピーしたコードを貼り付けます。

「テキスト」モードでは、次のような形式でコードを挿入します。

<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/3wKfRKwyaJ0" frameborder="0" allowfullscreen></iframe></div>

その後、モバイル機器でも、画面サイズに関係なく、問題なくYouTubeの動画が表示されます。

※この方法は、 WordPressだけでなく、寀ーなど、他のプラットフォームでも反応型で、YouTubeと非メオ映像を挿入するときに活用が可能です。

例 - ヴィヴァルディの「四季」

メモ：

• Elementor ページビルダーに動画を挿入する方法