Twitter icon  Tumblr icon  facebook icon  rss icon  feedly icon
naglly.com > ブログについてアーカイブ

オーバーレイ広告を映像に被せず、共存させるYoutube動画の埋め込み方法

youtube_embed.png

 今日はいつものネタ紹介記事とは少し趣向を変えまして、最近僕がブログ更新時に実践している、Youtube上に表示されるオーバーレイ広告と映像を共存させる為の動画の埋め込み方法について書きたいと思います。

 Youtube再生中、下部に被さるように表示される広告、いわゆる「オーバーレイ広告」ですが、Youtube動画を埋め込む時のサイズを少し調整すると、広告と映像が被らないように調整する事が出来ます。

 この方法が効果的なのは、主に映像サイズの縦横比が16:9(例えば、640x360ピクセル)のものです。最終的な埋め込み動画は、記事の始めに貼り付けた画像の様に、上下に黒い枠が作成され、その下部黒枠の映像に被らない位置で、広告が表示されるようになります(実際に貼り付けた当ブログ記事の一例)。

設置方法(埋め込む動画サイズの横幅を640ピクセルにする場合)

1. 通常の方法で、Youtubeページの「共有」→「埋め込みコード」タブでサイズを指定し、埋め込み用のコードをコピーします。

youtube_embed_1.png

2. コピーしてきた埋め込みコードを以下に変更します。

<iframe width="640" height="360" src="//www.youtube.com/embed/XXXXXXXXXXX" frameborder="0" allowfullscreen></iframe>

 ↓

<iframe width="640" height="480" src="//www.youtube.com/embed/XXXXXXXXXXX" frameborder="0" allowfullscreen></iframe>

3. 変更したコードを記事内に記載し、UPします。

 以上です。

 映像の縦横比が4:3の映像(例:640x480ピクセル)の場合は、そのままのサイズで埋め込んでも、縦幅が十分に確保されているせいなのか、それほどうざい感じにはならない為、特に上で記載した調整は行っていません。縦長の映像も同様です。

 当ブログの場合は、なるべく動画を大きく掲載したい為、16:9の映像の埋め込みサイズを横幅727ピクセル、縦幅545ピクセルにしています。ここで、横幅を728ピクセル以上にすると、728x90ピクセルのビックバナーが優先的に表示されてしまうため、オーバーレイ広告の範囲が大きくなり、上記の方法で広告と動画を共存させる事が難しくなるので注意が必要です。また、スマートフォンのブラウザにも効果は無いと思います。

 ノーマルのブラウザ上で、Youtubeの閲覧時に飛び込んでくる広告を全て消すことは事実上不可能ですので、せめてブログ訪問者に対しては、広告が映像に被らないよう、上手く共存させつつ表示させることは出来ないかと思い、苦肉の策でこの方法を考えました。この掲載方法が、少しでもこのブログを訪れて頂いている、皆様のお役に立てれば幸いです。

 この記事のカテゴリは、ブログについて です。
このエントリーをはてなブックマークに追加

親が若い頃の写真を子供の世代で再現、その画像を掲載するブログ

like_mom_like_dad_01.jpg

 ...残りの記事を読む

 この記事のカテゴリは、エモい画像, ブログについて です。
このエントリーをはてなブックマークに追加

再生回数0回のYouTubeビデオをひたすら掲載するミニブログ「0 views」

zero_views.jpg

 この記事で紹介したサイト「0 views」はすでに無くなっていたので、同様のコンセプトのサイトを新たに見つけ、新しい記事にしました。以下よりどうぞ。

再生回数0回のYoutubeビデオをランダムに紹介するサイト「No Views」 | naglly.com

世界最大の動画サービス「YouTube」でUPされているにも関わらず、長年誰にも視聴されなかった、ある意味とても貴重な再生回数0回のYouTubeビデオを掲載するサイト「No Views」を紹介します。 以下のリンクよりどうぞ。 No Views: watch unwatched YouTube videos | Randomly Inspired!No Views is a place to see YouTube videos that have never been watched.www.randomlyinspired.com サイトを開いた時点で、再生回数0回のビデオが1つ

 ...残りの記事を読む

 この記事のカテゴリは、ブログについて です。
このエントリーをはてなブックマークに追加

高さ2m40cmの地下トンネル入口で起きる事故の模様をひたすら投稿するブログ

2m40_01.jpg

 ...残りの記事を読む

 この記事のカテゴリは、ブログについて, 気になるもの です。
このエントリーをはてなブックマークに追加

ちょっとかわいい「404 not found」などのHTTPエラー用イラスト

404_not_found.jpg

 ...残りの記事を読む

 この記事のカテゴリは、エモい画像, ブログについて です。
このエントリーをはてなブックマークに追加