ワードプレスの基礎知識や、ワードプレスの導入方法から初期設定の方法、カスタマイズの方法から使い方まで、初心者の方にも分かりやすく解説!

埋め込み動画がスマホからはみ出してしまう場合の対策方法

ブログやサイトにYouTube等の動画を埋め込む場合があります。

その時、パソコン上から確認するときれいに表示されているのに、
スマホから確認すると、動画が画面からはみ出してしまう場合があります。

画面からはみ出して、再生ボタンが押せなかったり、
スマホの画面が左右にずれて動いてしまったり・・・

 

 

こんな感じですね。
 

埋め込み動画がスマホからはみ出してしまう場合の対策方法

 

埋め込み動画がスマホからはみ出してしまう場合の対策方法

 

 

動画の埋め込みだけでなく、Googleマップの埋め込みでも、
スマホから確認すると、地図が画面からはみ出してしまう場合があるんですね。
 

埋め込み動画がスマホからはみ出してしまう場合の対策方法

 

埋め込み動画がスマホからはみ出してしまう場合の対策方法

 

 

そういった、スマホから埋め込み動画等がはみ出してしまう場合の
対処方法をご紹介いたします。

 

 

埋め込み動画等がスマホからはみ出してしまう場合の対策方法

埋め込み動画等がスマホからはみ出してしまう場合の対策方法としては、
CSSHTMLタグの2つを設定する必要があります。

 

 

まずは、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%;
}

 

 

これで準備完了です。

あとは、動画等を埋め込む場合に、
埋め込みタグを<div class="video-container">と<⁄div>で挟むだけです。

 

 

<div class="video-container"><埋め込みタグ><⁄div>

 

 

これで、スマホから確認した場合でも、画面内に動画がきれいに収まりますよ。

 

 

今はブログやサイトのテーマにもよりますが、
基本的には、パソコンよりもスマホからのアクセスの方が多いです。

スマホから動画等がはみ出していれば、機会損失になることもありますので、
今回ご紹介させていただいた方法で、きっちりと対策しておきましょう。

 

 

 

おすすめワードプレステンプレート【エッジプラス1】

ナガーノは、ワードプレスのテンプレートは、
【エッジプラス1】をおすすめしています。

当サイトもエッジプラス1のテンプレートを利用して作成しています。

エッジプラス1

 ↓ ↓ ↓

エッジプラス1の豪華特典付きレビューはこちら

 

 

ワードプレス初期設定代行サービスについて

※ワードプレスの設置・初期設定でお困りの方は、
【ワードプレス初期設定代行サービス】で、ナガーノが代行作業させて頂きますね。

ご希望の方は、【ヘッダー画像】の作成代行のみをお申し込み頂く事もできますよ。

ワードプレス(WordPress)初期設定代行サービス

 ↓ ↓ ↓

ワードプレス(WordPress)初期設定代行サービスのご案内はこちら

 

 

ナガーノのアフィリエイトコンサルについて

ナガーノはあなたと1対1のマンツーマンでのアフィリエイトコンサル
【アフィリエイトマンツーマンコンサル】をお受けしています。

マンツーマンコンサル

 ↓ ↓ ↓

ナガーノのマンツーマンコンサルの詳細はこちら

 

 

マンツーマンコンサルの上位コンサルの
【アフィリエイトプレミアムサポート】もお受けしています。

プレミアムサポート

 ↓ ↓ ↓

ナガーノのプレミアムサポートの詳細はこちら

※すでに定員に達してしまっていた場合は、ご了承ください。

2種類のアフィリエイトコンサルのより詳しい内容は
こちらのサイトでご案内しています。

⇒アフィリエイトコンサルの詳しいご案内サイトはこちら

 

 

ワードプレスのことだけでなく、
アフィリエイト全般のご質問もお気軽にお問い合わせください。

基本的に12時間以内、遅くても24時間以内には必ずご返信させて頂きます。

お問い合わせはこちらから

ナガーノ

 

 

 

 

トップページへ戻る

 

 

この記事を読まれた方は次にこの記事も読まれています

 

 

【期間限定】ナガーノのメルマガに登録するだけで【豪華ツール】無料プレゼント中

今なら、ナガーノの無料メルマガに登録するだけで、
豪華ツール&最大1500ポイントのメルマガポイントをプレゼント
しています。

ナガーノの無料メルマガ

 ↓ ↓ ↓

ナガーノの無料メルマガのご登録はこちら

⇒メルマガポイント交換特典のご案内はこちら

 

 

ナガーノのLINE公式アカウントに登録するだけで【メルマガポイント】プレゼント中

今なら、LINE公式アカウントに友達登録して頂くだけで、
2000円相当のメルマガポイントプレゼント中!

スマートフォンからサイトをご覧になっている場合は、
こちらから友達に追加してくださいね。

友だち追加

パソコンからサイトをご覧になっている場合は、
スマートフォンでこちらのQRコードを読み取って、友達に追加してください。

もしくは、@naga-no(@も含む)で友達検索してください。

 

 

トップページへ戻る

 

 

ビジネス雑誌や新聞で紹介されました

月刊BIGtomorrow(ビッグトゥモロウ)2017年3月号

月刊BIGtomorrow2017年3月号(1月25日発売)でナガーノが紹介されました。

詳しくはこちらをご覧ください。

 

スポーツニッポン新聞(スポニチ)西部版2018年6月20日発売

2018年6月20日発売のスポーツニッポン新聞(スポニチ)西部版でナガーノが紹介されました。

詳しくはこちらをご覧ください。

 

デイリースポーツ 大阪本社版2018年7月1日発売

2018年7月1日発売のデイリースポーツ 大阪本社版で、ナガーノが紹介されました。

詳しくはこちらをご覧ください。

エッジプラス1

エッジプラス1

エッジプラス1

エッジプラス1はアフィリエイトに特化したワードプレスのテンプレートです。

レスポンシブ対応なので、スマホからのアクセスも逃しません。

当サイトもエッジプラス1のテンプレートを利用しています。

エッジプラス1の詳細はこちらをご覧ください。

ワードプレス(WordPress)初期設定代行サービスのご案内はこちらをご覧ください。

サイト運営者について

一般社団法人
日本情報販売論理機構(JIBEO)
第3期認定レビュアー

ナガーノ

こんにちは、ナガーノです。

当サイトにお越し頂きありがとうございます。

ナガーノは2008年後半よりアフィリエイトをはじめ、2012年12月31日、14年間勤めてきた会社を退職し、現在は専業アフィリエイターとして活動しています。

ナガーノの詳しいプロフィールはこちらをご覧ください。

当サイトでは、ワードプレスの基礎知識や、ワードプレスの導入方法から初期設定の方法、カスタマイズの方法から使い方まで、初心者の方にも分かりやすく解説しています。

また、ナガーノは、メインサイトで、アフィリエイトで月収10万円稼ぐための情報配信も行っています。

ナガーノのメインサイトはこちらからご覧ください。

また、ナガーノは1対1のマンツーマンでアフィリエイトコンサルもさせて頂いています。

ナガーノのアフィリエイトコンサルの詳細はこちらをご覧ください。


ナガーノは2011年11月に一般社団法人 日本情報販売論理機構(JIBEO)の第3期認定レビュアーに就任。

2012年12月までの在任期間中、詐欺商材を排除するために活動していました。

在任期間終了後も、ナガーノは中身も確認せずに、サイト等で紹介するという行為は、読者さまを裏切る行為になるので絶対に行っていません。

詐欺商材などでお悩みの方は、一度、ナガーノにご相談くださいね。

LINE公式アカウント

Line公式アカウントに友達登録して頂くだけで、今なら、2000円相当のメルマガポイントプレゼント中!

スマートフォンからサイトをご覧になっている場合は、こちらから友達に追加してください。

友だち追加

パソコンからサイトをご覧になっている場合は、スマートフォンでこちらのQRコードを読み取って、友達に追加してください。

もしくは、@naga-no(@も含む)で友達検索してください。

サイト内検索
ブログランキング

今日も応援クリックありがとうございます。

あなたの応援が励みになります♪

お問い合わせ

ワードプレスのことだけでなく、アフィリエイト全般のご質問もお気軽にお問い合わせください。

基本的に12時間以内、遅くても24時間以内には必ずご返信させて頂きます。

お問い合わせはこちらから

お気に入り登録

お気に入り登録しておくと次回からのアクセスが便利です♪

お気に入りに登録するには、【CTRL + D ボタン】で登録できます。