スマホで見ると動画がはみ出る時の対処法

年金すら払えない中年がパソコンで総支給額以上稼ぐ裏ネット方法

年金すら払えない状態からノートパソコン1台で年収1000万円を達成したネットで稼ぐ倉田旬のブログ

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

読了までの目安時間:約 5分

 

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

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

 

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

 

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

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

 

 

 

 

この記事に関連する記事一覧

comment closed

管理人 倉田しゅん です

kurata

管理人 倉田旬 (くらしゅん)
⇛ 詳しいプロフィール

役に立たないことはあり得ない
↓↓ プレゼントつき ↓↓


倉田の裏メルマガはこちら


管理人へ連絡


カテゴリー
アーカイブ
タグ
最近の投稿