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. サイトアフィリエイトの特化型サイトで稼ぐ方法

  2. 楽天アフィリエイトの稼ぎ方!はてなブログやツイッターで売り上げ1000万円超えの秘密

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

  4. サイトアフィリエイト記事外注化で稼ぐ!失敗しないライターさんの募集方法

  5. サイトアフィリエイトでの良いサイトと悪いサイト

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

  7. 楽天アフィリエイトアカウントIDが削除された!ID停止解除・復活方法

  8. サイトアフィリエイトで書くネタをすぐに見つける方法

  9. サイトアフィリエイトの意味、サイトアフィリエイトとは?

梅田よし プロフィール

IMG_937555

 

 

友だち追加

 

 

ID: @gtload でID検索してください!


初心者でも資金0円から
サクッと稼ぐ手法」プレゼント中!

 




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

 

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. 過去に梅田がひっかかった詐欺商材とは
  2. ネットビジネスで報酬を加速させる最も稼ぎやすい4大…
  3. チャンスが訪れるタイミング
  4. 一緒に仕事をしてはいけない人間を見極める方法
  5. 根拠のない自信を持つ!

最新記事

  1. なんラジVol.50!実績者続々輩出中のオズバンス…
  2. なんラジVol.49!即金系VS安定系ノウハウ
  3. なんラジVol.48!言いたい事も言えないこんな世…
PAGE TOP