Archives | Tumblr | Facebook | bullet-feed.pngRSS
TOPBlog

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

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

映画で使用された全フレームを単一のイメージに圧縮(画像)

THE_MATRIX.jpg

 ...残りの記事を読む

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

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

like_mom_like_dad_01.jpg

 ...残りの記事を読む

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

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

zero_views.jpg

 ...残りの記事を読む

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

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

2m40_01.jpg

 ...残りの記事を読む

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

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

404_not_found.jpg
Original update by Ape Lad

 ...残りの記事を読む

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

ニュースサイトの今と昔

news_site.png

 ...残りの記事を読む

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

ブログを書いている人に便利かもしれないbookmarklet(ブックマークレット)集

 今更かも知れませんが、ブックマークレット(Bookmarklet)とは、あらかじめ用意されているリンクをお気に入り(ブックマーク)に登録しておくことによって、ある動作を簡略化出来る仕組みです。

 たとえば、2チャンネルで既にDAT落ちとなってしまったページを開いたまま、下記のブックマークレットを使用すると、現在表示しているアドレスを拾って、過去ログの候補を探し出すサイトでの検索結果を表示する、と言った事が出来ます。

参考リンク
 »  「2ch DAT落ちスレ ミラー変換機」用ブックマークレットを作ったよ - 涙目で仕事しないSE

 ブックマークレットの使用方法は、上記のリンクを見ていただくと良く分かると思います。

 ブックマークレットは確かに便利なのですが、意識して使っていないとそのうち忘れ去られてしまうと言う事は多いです。今回、他の方にとって役立つかは分かりませんが、現在自分が使っているブックマークレットを紹介します。

1. あらゆる外国語を日本語に翻訳(google翻訳)
 google翻訳を使用して、外国語を日本語に翻訳します。使用されている外国語は自動判別されるので、意識する必要がありません。なお、このリンクは、Google翻訳を辿っていけば同じものを見つけられます。


2. Yahoo!翻訳(英語→日本語)
 Yahoo!翻訳を使用して、英語を日本語に翻訳します。僕にとっては最も頻繁に使うブックマークレットです。


3. テキストリンク作成ブックマークレット
 今見ているサイトにリンクを貼った記事を作成したい場合に、このブックマークレットを使用すれば、一発でリンクタグを作成し、別窓で表示してくれます。これは便利!
 » テキストリンク作成ブックマークレット :: gerenuk.crazyphoto.org/


4. サイト上でRSSを検索
 お気に入りのサイトのRSSを購読したいけど、サイト上にRSSのアイコンや記述が見つからない場合、このブックマークレットがRSSを探してくれます。検索した後、各RSSリーダーの登録アイコンが表示されるので便利です。


5. 計算機(Firefox専用)
 別窓で計算機が現れます。パッと計算したいときに便利。


6. リンクをURLで表示
 リンクがURLに変換されます。リンクのURLをコピーするときや、不正に飛ばされるリンクが無いか確かめることが出来ます。


7. 表示されているイメージを全部隠す
 ボスが来た!なんてときに使うと便利かも。


8. ブラウザ画面リサイズ
 始めに幅、次に高さを聞いてきますので、入力します。すると、ブラウザが、入力したサイズにリサイズされます。これで、自分のブログが、他のブラウザ環境で、はみ出していないか確認できます。


9. 216色のカラーチャートを表示
 216色のカラーチャートと、その色に該当する16進数のカラーコードが表示されます。


参考にしたサイト
 » 100 Best Bookmarklets for Writers, Researchers, and Students | MatchACollege.com
 » Guide to Most Useful Bookmarklets for Chrome, Firefox, Safari, etc.
 » XHTMLed | Miscellaneous | Bookmarklets
 » JAVASCRIPT::BOOKMARKLET
 » Bookmarklet - パソコン遊戯
 » Bookmarklets - Tool Categories

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

続 マーフィーの法則・ブログ編

8. 気合いを入れて時間を費やし仕込んだ記事は、出来上がる寸前に飽きる。

9. 検索して見つけたブログとは、内容の濃さで争うな。それは、多勢に無勢と言う。

10. アクセス数とは、定期更新していてもさほど増えないが、更新しなくてもそれほど落ちていかない。

11. 優良な情報が載っているブログほど、デザインは重要視されなくなる。多少、見づらくても。

12. ニュース系の記事更新とは、そのニュースに関するGoogleの検索候補を一つ加える行為の事ある。

13. 日記系のブログは、個人的な行事をGoogleの検索候補に一つ加える行為の事である。

14. 面白いブログ記事とは、突き詰めると、他の誰かとの相対的な差を表現したものである。

15. 共感を得る記事とは、突き詰めると、他の誰かと相対的な差が無いことを表現したものである。

補足:上記のどちらにも当てはまらない記事が、「雑記」としてカテゴライズされる。

16. 少量の駄文は全く評価されないが、継続的に書き込まれる膨大な駄文はしばしば評価される。

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

マーフィーの法則・ブログ編

1. やめる余地がある限り、いつかはやめる。

2. 更新は見かけより簡単ではない。

3. 今までブログ更新に掛けた時間を、別の時間に割り当てたら、別の素晴らしいことを成し遂げられる。

4. 今やっている行為を第三者的に見ることが出来たら、たぶん更新できない。

5. アクセス数は大事だが、不相応なアクセス数が獲得できたら多分飽きる。

6. 記事のアクセス数は、凝ったネタを考える際、費やした時間に反比例する。

7. デザインは変えられる部分がある内は、変えられ続ける。

補足:デザインを変えるほど見た目は悪くなっていき、また変更する部分が増える。

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