◆当サイト一押し教材『ルレアプラス』◆

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

    サイト作成時にYoutube動画を記事に埋め込んだりしてますか?

    動画を使うことでサイト滞在時間を延ばすことができるため、SEO的にも有効とされています。

    関連する動画や自分で作成する動画があれば積極的に使っていきましょう。

    とは言ったものの普通にYoutube動画を設置するとスマホでサイトを閲覧したときに

    画面から動画がはみ出てしまいます。

    下の画像が実際に何も変更せずに記事に載せた動画です。

    Screenshot_2014-03-20-20-38-23

    動画の中心が画面の右側にあるので、動画の右半分がはみ出てしまっています。

    これだとせっかくサイトに訪問してくれた人が動画を快適に閲覧できないですね^^;

    そこでWordPressのCSSを変更することでYoutube動画も画面ピッタリに

    レスポンシブ化することができます。

     

    そのやり方ですが、まずCSSに以下の内容を追加します。

    次にYoutube動画の共有コードを記事に入れるときに以下のようにdivで囲みます。

    これだけで動画がレスポンシブ化になります。

    では、実際にスマホでサイトを見てみましょう。

    Screenshot_2014-03-20-19-29-53

    画面にピッタリと収まりましたね!

    非常に簡単な変更でレスポンシブ化することができるので、

    Youtube動画をサイトに載せるときには使ってみてくださいね!

      ◆アフィリエイトで成功するためのオススメ情報商材◆

      オススメ情報商材ランキング
      実際に私が実践しているアフィリエイトで稼ぐための情報商材をランキング形式でご紹介します。
      便利ツールランキング
      アフィリエイトの実践を補助する役立つ便利ツールをランキング形式でご紹介します。

      ◆Facebook始めました◆

      最新記事もチェック

      ◆SAKUの無料メルマガ購読のご案内◆

      mail-magazine

      コメントを残す

      日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)