ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2020年3月1日| , | 3のコメント

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

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

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

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

WordPressにYouTubeの映像を挿入する

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

WordPress YouTubeの映像を追加

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

WordPress 有ビュート映像共有する

開始時刻を設定するには、「開始時刻」オプションをチェックするようにします。 この方法で、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:モバイル機器でYouTubeの動画が切り捨てられずに表示されるようにする1

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

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と非メオ映像を挿入するときに活用が可能です。

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

メモ:


3のコメント

コメント

?

    • こんにちは、Jay様。

      この記事に記載され、コードを使用すると、HTMLコードを入れたコンテナにいっぱいに動画が表示されます。
      (テストに追加した画像(ヴィヴァルディ四季)を参照してください。)

      コンテナを使用して位置を調整することができないかと考えます。

      基本エディタである Gutenbergを使用する場合、Design> Columnブロックを活用したり エレメン などのページビルダーを使用している場合でも、同様にとなるでしょう。

      https://www.screencast.com/t/IYYQpy0GH7

      または、上記のHTMLコードを囲むようdivを追加して、そのdivコンテナのhtmlを適用することができます。 div内のdivが中央に配置されるようにしたい場合には、次の記事を参照してください。

      https://www.thewordcracker.com/basic/how-to-align-center-in-div-within-a-div/

      応答
WordPress Naver カフェを訪れる

ありがとうございます!