YouTube動画をレスポンシブ対応にする方法

  • このエントリーをはてなブックマークに追加

responsive-web-design_englishども!梅田です!!

 

YouTube動画などをサイトにアップした場合、
スマホから見たら横にはみ出てしまってるって事ないですか?

 

最近のサイトはレスポンシブデザインが主流ですが、
埋め込み動画に関してはサポート出来ていないので、
そのまま埋め込むとスマホによってははみ出てしまい、
スマホユーザーからはすこぶる不評になります(^^ゞ

 

そこで今回は埋め込み動画を簡単にレスポンシブにする方法について解説します。

 

YouTube動画をレスポンシブ対応にする方法 解説動画

YouTube動画をレスポンシブ対応にする方法

 

rapture_20150801144922

 

YouTube動画の場合は、埋め込みたい動画から共有→埋め込みコードをクリックし、
動画の埋め込みコードを表示させてください。

 

このコードをサイトやブログに貼り付ける事で動画を埋め込む事が出来ます。

 

ただこの場合はレスポンシブに対応出来ていませんので、
埋め込む時に下記コードを追加します。

 

<div class=”v-wrap al-c m30-b”>動画の埋め込みタグをここに貼り付け</div>

 

埋め込みコードの前後に、太字のタグを入力してください。

 

たったこれだけで動画がレスポンシブになり、
スマホから見た場合でも大きさは最適化されます。

 

スマホ表示の確認は、以前に書いたこちらの記事を参考に、
Chromeから確認してみてください。

 

関連:PCでスマホ表示させる簡単な方法

 

まとめ

 codium-extend-mokup

とても簡単に動画をレスポンシブに出来ますので、
動画を埋め込む時には必ず実践するようにしましょう。

 

スマホユーザーはこれからどんどん多くなってきますので、
ストレスなくサイトを見てもらう為には必須になります。

 

  • このエントリーをはてなブックマークに追加

opt3



関連記事

  1. SEO対策で最も有効な手法とは?

  2. サイトアフィリのデータ公開

  3. サイトアフィリエイトの特化型サイトで稼ぐ方法

  4. 記事タイトルとディスクリプションの書き方

  5. サイトアフィリエイトのキーワード 2つの寿命を理解して稼ぐ

  6. サイトアフィリエイトで不労所得生活は可能か?

  7. Googleアナリティクスの使い方、サイト改善方法

  8. 【証拠画像あり】初心者でも簡単に稼げるレビューサイトアフィリエイトの手法

  9. サイトアフィリエイトを実践したい人へ

梅田よし プロフィール

IMG_937555

 

 

複数の会社を経営、
事業内容も飲食店の複数店舗経営、
音楽事業やサービス事業など、
活動は多岐に渡る。

 

2012年に更なる活躍の場を求め
ITの世界にも進出後

わずが8ヶ月で月収100万円を達成。

 

その後多くの人にビジネスを伝え、
現在も沢山の起業家を
世に輩出している。

 

更に詳しいプロフィールはこちら

 

 

 

■コンサルティング指導実績■

 

月収200万円達成者 1名

月収100万円達成者 3名

月収50万円達成者   3名

月収30万円達成者   8名

月収10万円達成者  多数

 

実績者達の声はこちら

 

 

 

■ネットビジネス実績■

 

2012年6月   ネットビジネス参入

2012年9月   月収23万9,704円達成

2013年2月   月収100万円を超える

2013年11月 インフォトップ6冠達成

2013年12月 単月売り上げが1000万円を超える

2014年7月   コンサル生2人が月収30万円を達成

2014年9月   コンサル生が月収100万円を達成

2015年12月 コンサル生が月収200万円を達成

2016年3月   eBook大賞優秀賞受賞

代表的な実績(一部)

2012年6月 ネットビジネス参入
2012年10月 月収20万円突破
2013年2月 月収100万円突破
skype
情報販売開始 1000万円突破
skype

人気記事ランクング

無料スカイプ相談

skype

ID: yoshi102030

skypeチャットでのご相談を受け付けています。


ネットビジネスで分からないことや、
ご相談などお気軽にお声かけください。


こちらからお気軽にご相談ください^^

YouTube

特集記事

  1. サイトアフィリエイト記事外注化の3つの王道
  2. アフィリエイトで成功する為のかけ算の法則
  3. 一緒に仕事をしてはいけない人間を見極める方法
  4. ネットビジネスやアフィリエイトで信頼出来るメンター…
  5. 過去に梅田がひっかかった詐欺商材とは

最新記事

  1. なんラジVol.42!オズバンスの近藤未唯さんが月…
  2. ネットビジネスのセミナーで誰よりも得をする参加方法…
  3. なんラジVol.41!オズバンスのアキさんが2ヶ月…
PAGE TOP