アフィリエイトなどはじめ、ネットビジネスについてのノウハウや役立つ情報を配信していきます。

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

Youtube動画を記事に埋め込む方法&動画サイズをCSSでレスポンシブ対応する方法は?

2016.09.11

2件

YouTube

ブログ運営をする際に「Youtube」の動画を記事中に埋め込みたいなと思う時もあるかと思います。

動画を埋め込むことでページの滞在時間が上がることによるSEO効果などが期待できます。

また、自身でYouTube動画をアップしている場合にも紹介できますしね。
※もちろん、リンク貼ってもOKですが…

そこで今回は…

・Youtube動画を記事に埋め込む方法
・動画のサイズをレスポンシブ対応させる方法

…などを解説していきたいと思います。

Youtube動画を埋め込む方法

Youtube動画を埋め込むこと自体は非常に簡単です。

共有→埋め込みコード」でコードを記事中の貼りたい場所にコピペするとOKです。

Youtube 動画貼り付け
※タッチで拡大可能

ただし、このままではレスポンシブ対応が効かないため、
CSSでレスポンシブ対応をしてあげる必要があります。

動画のサイズをCSSでレスポンシブ対応させる方法

動画のサイズをレスポンシブ対応させないと非常にかっこ悪いです…。

Youtubeの動画だけ幅がはみ出ちゃって画面がブレブレになってユーザビリティを損ねてしまいます。

アクセスやアドセンスの収益性の面でも決して良くはないと思います。

せっかく良い記事を書いていても動画だけ枠からはみ出ていて見栄えが悪くもったいないなと思うサイトが意外とあります。

非常に簡単なので、サクッとやっちゃいましょう。

僕自身、HTMLやCSSはそこまで詳しくないですが普通にできましたよ。

まずは、先ほど解説した埋め込みコードを下記の「動画の埋め込みコードを入力」という部分にコピペして下さい。

上記は、記事中に動画を埋め込みたい場所にクラス名を指定してあります。

次にレスポンシブ対応させるためのCSSですね。

クラス名を指定したら、スタイルシートに上記の記述を書き加えましょう。

コレでYoutube動画がレスポンシブ対応で上手くサイズ調整されると思います。

もしも、まだレスポンシブ対応をやってないなーという方は試してみて下さいね。

コメント

    • マレク
    • 2016年 9月 20日

    こんにちは。
    やっぱり見栄えは大切ですよね。

    僕も趣味ブログで動画を埋め込むことがありますが、見る人にとって有益だなと思ってもらえるように配慮はしていますね。

  1. こんにちは ランキングから来ました。

    ブログで見た目は重要ですね。
    動画を埋め込んでいますが、CSSは使っていなかったので
    とても勉強になりました。
    ありがとうございます。
    早速、活用させて頂きます。

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

ブログランキング参加中

ブログランキング上位目指して頑張ってます!
【現在のランキング順位は…?】

にほんブログ村 小遣いブログへ
にほんブログ村 小遣いブログ アフィリエイトへ

運営者情報

「運営者…ケンタ」
2016y08m15d_005502471

アフィリエイトをはじめ、最初の半年はほぼ無収入。

その後も諦めずに続け、試行錯誤しながらも約1年で月収50万円を達成。

現在ではメインブログは1日数時間の作業となり、空いた時間は趣味に費やしたり、更なる飛躍に向けて勉強中…。

このブログでは、アフィリエイトやネットビジネスをなどに関して有益な情報を配信していけたらと思っています。

Twitterやってます