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. image003

    バックアップしてないシリウスのデータが消えた時の復元復旧方法

  2. 131207mugendai_data-thumb-640x360-68684

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

  3. rapture_20150510121708

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

  4. rapture_20150830103418

    サイトアフィリでの被リンク効果

  5. 604x402xiStock_000051968010_Small.jpg.pagespeed.ic.piAqXgVirK

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

  6. googleanalytics-setup

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

  7. 200802270534

    サイトアフィリエイトの作り方

  8. image004

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

  9. 82f21562934330ad9ae3bc5d7a15f49e

    サイトアフィリエイトのオススメの塾は?その内容と稼げる塾の見極め方

梅田よし プロフィール

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

人気記事ランクング

  1. image015
  2. コピーペースト
  3. imagjhfge011
  4. imag6e014
  5. image007

無料スカイプ相談

skype

ID: yoshi102030

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


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


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

YouTube

特集記事

  1. imag6e014 診断チェック!!あなたはネットビジネスで稼げる人?…
  2. rapture_20160519134657 サイトアフィリエイト記事外注化の3つの王道
  3. rapture_20160622124734 根拠のない自信を持つ!
  4. second-chance チャンスが訪れるタイミング
  5. コピーペースト コピーペーストがたった0.01秒!劇的に作業効率を…

最新記事

  1. rapture_20161121173154 オズバンス募集日&参加費決定!
  2. rapture_20161121173154 オズバンス第三弾動画!初心者だって大丈夫です!!!…
  3. rapture_20161121173154 先行エントリー数3倍超え!オズバンス第二弾動画公開…
PAGE TOP