ブログ

YOUTUBE動画を埋め込む方法とスマホ動画サイズを最適化する方法

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

ダイレクトレスポンスマーケティングで音楽業界に恩返しを誓う!
たけやんです。

今回は、

YOUTUBE動画を埋め込む方法とスマホ動画サイズを最適化する方法

についての説明です。

 2015年3月11日追記
ここについての記事はワードプレステンプレート『賢威』を使っている場合です。
その他のテンプレートや、無料ブログの場合は、cssファイルを設定する必要があります。
詳しくは下記の記事を参照してください。
WordPress(ワードプレス)テンプレート『TCD』で動画をスマホレスポンシブにする方法

YOUTUBE動画をアップロードをしたら、
是非とも自分のブログなどで公開し、拡散していきましょう。

そのために効果的なのが、YOUTUBE動画の埋め込みです。

私のサイトでも、

このように動画を埋め込むことによって、気軽に視聴できるようにしています。

埋め込む方法は非常に簡単で、

youtubeumekomi

埋め込みたい動画の『共有』タブの『埋め込みコード』をクリックすると、
そこにHTMLのコードが表記されるので、それをコピーペーストするだけです。

サイズなども指定できるので、そこに記載したコードを、
そのままブログに記載すれば埋め込みが完了です。

 

スマホで見た時の動画サイズを最適化する方法

ただ、動画のサイズによっては、スマホなどで見た時に表示枠を大きくはみ出してしまう場合があります。

01

こんな感じですね。

これを解消するために、

<div class=”v-wrap al-c m30-b”>動画の埋め込みコード</div>

というコードで、動画の埋め込みコードを挟みます。

具体的には

<div class=”v-wrap al-c m30-b”><iframe width=”560″ height=”315″ src=”//www.youtube.com/embed/nCSIGLxsEE8?rel=0″ frameborder=”0″ allowfullscreen></iframe></div>

という感じで入力してください。

そうすると、

02

このようにスマホでのサイズが最適化されます。

※Wordpressでブログを構築されている場合、プラグインに『wp touch』を入れている場合、上手く表示されない場合があります。

 

以上、

YOUTUBE動画を埋め込む方法とスマホ動画サイズを最適化する方法

に関する記事でした。

YOUTUBEアフィリエイトで稼ぐための教科書

私のコンサルメンバーでもあるショーゴさんが、YOUTUBEアフィリエイトの教材を作成しました!

YOUTUBEで収入を得たいのであれば、1つは持っておきたい教科書的な教材です。

私のサイトからの購入特典もあるので、詳しくは下記の記事をチェックしてみてください。

YouTube Maniax

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

人生の選択肢を増やすための永田武公式メールマガジン

コメント

    • いち丸
    • 2014年 4月 09日

    YouTubeを拝聴し、サイトに参りました。
    ひとつ、質問なのですが、Twitterにサムネイル付きでYouTubeをアップするのは、どうしたらいいのでしょうか?
    実際、アップされているアカウントも多く見られるのですが。。
    あと、DRMでおすすめの動画、Podcastなどおりましたら、アドバイスいただければ、最幸です。
    (._.)

    • コメントありがとうございます。

      Twitterにサムネイル付き動画をUPするのは、
      投稿したいYOUTUBE画面の「共有」タグから、
      Twitterのアイコンからつぶやくと、
      サムネイル付きで動画表示されます。

      DRMに関する動画ですが、
      是非当サイトの

      【マーケティングとは】初心者でもわかるDRMの基本
      http://take-yan.com/5_1-908

      【ブランディングとは】ファンにどう思われたいですか?
      http://take-yan.com/4_1-901

      をご覧ください。

    • よう
    • 2014年 8月 11日

    記事を読ませていただきまして解説通りにタグを
    埋め込みスマホで確認したところYouTubeが
    はみ出てしまって改善されていませんでした。

    現在Wordpressを使っていて、wp touchは外している
    状態なのですがうまくいきません。

    アドバイス頂けるとありがたいです。

    • コメントありがとうございます。

      テーマの編集より、モバイル系のCSSに

      /*ここから(Youtube動画)*/
      #main-contents .v-wrap{
      position: relative;
      overflow: hidden;
      height: 0;
      padding-bottom: 56.25%;
      padding-top: 30px;
      }

      #main-contents .v-wrap iframe,
      #main-contents .v-wrap object,
      #main-contents .v-wrap embed{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      }
      /*ここまで(Youtube動画)*/

      上記のソースを追記してみてください。

        • よう
        • 2014年 8月 11日

        永田さん

        ご対応ありがとうございます。

        おかげで無事に解決することができました。

        ありがとうございました!

    • ゆう
    • 2014年 8月 20日

    永田さま

    はじめまして。うまくいかないので、助けてください。
    seesaaにyoutubeの動画を貼り付けました。
    それをスマホから見ると、画面が切れるので、
    ここのサイトで書かれている
    動画の埋め込みコード
    でやってみましたが、状況は変わりません。
    お忙しい中申し訳ありませんが、なにかお分かりになれば
    お力添えをお願いします。

    • ゆうさん、こんばんは。

      seesaaであれば、YOUTUBEの埋め込みの前に

      これをいれてみてください。

      その後に

      のように埋め込みタグをいれれば、おそらくスマホで適正サイズで表示されると思います。

        • ゆう
        • 2014年 8月 21日

        さっそくのお返事ありがとうございます!
        でも、なんだか表示がおかしくて、何が書いているか読めません。
        サーバーエラーと書かれています。
        確認お願いします。お手数をかけてごめんなさい。

        • それは、私のコメント欄がエラー表示されているということですかね?
          であれば、
          http://take-yan.com/wp-content/uploads/2014/08/douga.txt
          こちらのテキストのコードをそのままブログを書く欄に張り付けて、
          そのコードの後に、YOUTUBEの埋め込みコードを貼ってみてください。

    • ゆう
    • 2014年 8月 24日

    たけやん様

    ゆうです。頂いたコードのうしろに、youtubeのコードを貼ってみましたが、上手くいきませんでした。コードがそのまま表示され、その下に動画が表示されてしまします。知識不足ですみません。こちら側の問題かもしれません。
    でもすぐに連絡をいただきまして、ありがとうございました。

    • ゆう
    • 2014年 8月 28日

    たけやん様のコード、確かに正常に表示されますね。

    たけやん様のコードの中の、youtubeリンク部分を私が張りたいやつに変えたのですが、だめでした。youtubeの設定か、ブログの設定のせいかもしれませんね。とりあえず、サイズを小さくして、スマホを横向きにすれば、なんとかなるようにしました。

    いろいろありがとうございました。

    ゆう

  1. この記事へのトラックバックはありません。

Facebook Twitter YOUTUBE google google

コンテンツカテゴリー

最近の記事一覧

ページ上部へ戻る