賢威スマホ動画はみ出る

賢威でスマホ表示させた時にYouTube動画がはみ出る時の対処法

 

あんまり売れ筋を褒めるのは好きじゃないのですが、

やっぱりワードプレスのテンプレート「賢威」は良い部分が多いです。

 

ちなみにこのブログでは使用していませんが(^_^;)

 

賢威のテンプレートを使用していて

YouTube動画の埋め込みを入れたのはいいけど、

スマホから見ると思いっきりはみ出ていた…基本そうなるんですが

 

そんな時の対処法を開設します。

超カンタンです。

 

 

例えばコチラの動画の埋め込みを貼り付けたとします。

 

 

まぁ、パソコンから見ると普通なんですが

 

スマホで見ると下のように

大きさがそのままで、画面内に収まりきれていません。

 

 

スマホ表示はみ出る

 

 

はみ出ると言うか、切れていますね。

これではあまりにも閲覧者さんに失礼です。

 

そんな時は、ワードプレスの編集画面をテキストモードにし

 

テキストモード

 

 

動画の埋め込みコードを<div class=”v-wrap”></div>囲みます。

 

<div class=”v-wrap”>埋め込みコード</div>

 

上記の動画の場合は以下の様になります。

↓(クリックで拡大)↓

 

動画のスマホ最適化コード

 

 

すると、スマホで見ても

ちゃんと幅に合わせて画面が最適化さています。

 

 

スマホ幅に動画が収まる

 

 

投稿画面で動画コードを貼り付けると、

勝手に最適化され、コードの内容が変更されますが

無視してOKです。

 

 

YouTubeに限らず、色んな埋め込みコードにも使えますが、

一部できないサイトのコードもあるようです。

 

 

ちなみになんですが、上記のスマホ画像は

PC上でスマホ表示を確認できるソフトを使って画像を撮りました。

 

興味ある方は → コチラ

 

 

更に補足として、

このテンプレート「The World」の場合には

 

<div class=”video-wrap“>埋め込みコード</div>

 

にすれば最適化されます。

 

 

半角でhtmlタグを打ち込むのに抵抗ない方は良いですが

僕を含め、大抵の方は覚えられないのではないかと思います。

 

<div class=”v-wrap”></div>や頻繁に使用するタグは

 

メモ帳などにまとめて保存しておいて、

いつでもコピペできるようにしておくと良いですね。

 

 

ちなみに僕は「ToClip」という無料ツールを使用しています。

 

ウィンドウズの場合デフォルトだと

テキストのコピーって直前しか記憶してくれませんが、

 

このツールは、コピーした履歴を保存してくれます。

 

しかも、よく使う文字列も別で登録し

簡単に呼び出すこともできるので、

これらのタグを登録しておくと便利ですよ。

 

軽いし、使えるツールです。

こちらも興味がありましたらコチラから。 → ToClip