Tweet

Pocket

ワードプレスに動画を「そのままのサイズで」埋め込みたいけど、
スマホ（iPhoneやAndroid）で閲覧してみると
画面の横幅からハミ出してしまうのがイヤ！

この記事では、ワードプレスに
ちょっとしたHTMLコードを加えるだけでこの問題を解決できる方法をお伝えします。

解決策

※上記画像はクリックで拡大できます。

※こちらのWPテンプレートは「RefinePro」というものですが、どのテンプレートでも同じ解決策になります。

画像のように、「外観」⇒「テーマ編集」⇒「custom.php」を選択します。

「custom.php」に次のコードをコピペしてください。

.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%;
}

次に、記事の中でYouTube動画を埋め込む時、テキストエディタにて
動画の埋め込みコードを下記のコードで挟むようにしてください。

<div class="video-container">
    ビデオ動画コード
</div>

つまり

<div class=”video-container”>
<iframe width=”500″ height=”281″ src=”https://www.youtube.com/embed/yDjrPwZS500?rel=0″ frameborder=”0″ allowfullscreen></iframe>
</div>

という感じになっていればOK、ということです（↑↑これはビジュアルエディタで書いているので、必ず先ほどのコードからコピーしてあなたのWPの記事編集顔面のテキストエディタで貼り付けおよび埋め込み動画のコードを貼り付けるようにしてください）。

※一々divタブで囲むのが面倒という方はプラグイン
　「AddQuicktag」を使うとより効率的です。

上記の操作を実行すると、下記のように、
スマホ画面の枠の中にYouTube動画が収まるよう自動調節されます↓↓

関連記事：WordPressにYouTubeの埋め込みタグを入れたら消える問題の解決方法

ぜひ参考にしてみてくださいね！

Tweet

Pocket