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

1

ワードプレス(WordPress)でYouTubeのビデオを挿入すると、デスクトップ(PC)では、正しく出モバイル機器では、画面全体が出ず一部だけ切り捨てられ表示されます。 この場合、CSSコードを使用してYouTubeの動画を反応型で動作するようにして、モバイル機器では、画面サイズに合わせて動画の幅が調整されるようにすることができます。

まず、次のようなCSSコードをワードプレスのテーマのスタイルシートファイル(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> ... </ div>コードをYouTubeのソースコードを囲むようにします。

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

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

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

YouTube Code Copy compressor  -  [ワードプレス]モバイル機器でYouTubeの動画が切り捨てられずに表示されるようにする

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

ワードプレス書く画面のテキストモード

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

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

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

ちなみにVimeo動画も上記のような形式にすると思われる(テストはならないし見るべき)。 もしうまくいかない場合 この記事に紹介されたHTMLコードを挿入すると、非メオ動画がモバイル機器でも切り捨てられずに表示されます。

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

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

1のコメント

コメントを残す

コメントを入力してください!
名前を入力してください