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

 ...残りの記事を読む

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

ブログを引越ししてから、「301リダイレクト」の効果が出てくるまでは時間が掛かる

 ドメインを新しく取り、新ブログを立ち上げ、運営し始めてから1ヶ月半ほど経ちましたが、引っ越してから今までの間、このブログのGoogleの検索順位は地を這っていました。

 初めは、「Googleの検索順位なんてどうでもいいや」と、たかをくくっていましたが、実は、ほんのちょっと...いや......やっぱり...かなり、完全に、気にしてました。(汗)

 今日の朝、各検索エンジンの検索順位などをチェックしてみたら、どうもGoogleの検索順位が復活してきたみたいです。ブログ移設前のアクセス数がだいぶ戻ってきましたよ。真面目な話、あまりにもGoogleの検索順位が下がったので、半ばふてくされてました。

 ...残りの記事を読む

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

ブログデザインと「ゲシュタルト崩壊」

 ブログのデザインってやっぱり気になりますよね。僕も暇さえあればデザインをいじっちゃう癖があって、困っています。

 デザインを色々変えてしまう原因のひとつとして、「自分で作り出したデザインを長い間じっと見てると、なんだかしらないけど、陳腐なものに思えてくる」と言うのがあると思うんです。

 で。

 あ、これって、なにかの現象に似ているんじゃないかと思ったんです。ほら、あれですよ。あれ。漢字をじっと見ていると正しく思えなくなってくる現象。

 単語を忘れてしまったので、ささっと検索。「ゲシュタルト崩壊」って言うらしいですね。

≫ ゲシュタルト崩壊 - Wikipedia

ゲシュタルト崩壊とは心理学における概念の一つで、全体性を持ったまとまりのある構造(ドイツ語でゲシュタルト Gestalt 形態)が、なにかをきっかけとして関連性に疑念を抱く状態となり、個々の構成部分のみに切り離して認識しなおそうとする事である。

 ...残りの記事を読む

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

Flickrで著作権的に問題のない画像を見つけて公開する方法

 下記の英文のブログ記事を読んで。

The finer points of finding free images | Creative Notes | Macworld

 ブログやサイト上に彩りを与えたい場合、なんらかの画像を掲載する事は有効的です。ブログ投稿のように非常に限られた時間の中で、なるべくテーマに沿った画像を探すのには、便利なサイトがいくつかあります。上記の記事に多少付け加えつつ、書いて行きたいと思います。

実際の例

creative commons
Original Update by steren.giannini

 ...残りの記事を読む

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

会社の人に『ブログがばれちまった』時はどうする?

 これは長い間ブログを書いていると、いつかはぶつかる問題な訳で。

≫ ブログがばれちまった

さっき、会社の同じ部署の人から

「○○日記ってお前のブログだろ」

ってメールがあった。

名前は伏せていたものの、年齢、職種、トイックの点数とか社内旅行の内容を正直に書いていたのが

特定された原因なのかもしれない。

 ...残りの記事を読む

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

ブログスペースの引越しが一段落したので、新旧のレンタルサーバの評価など

 ようやくブログスペースの引越しがほぼ終わりました。このために、ここ何日かは記事投稿をないがしろにせざるを得なかったです。

 今回、ドメイン取得とサーバー引越しに至った理由は下記の理由からです。

MySQLが元サーバでかなり使えなかった

 今までブログが設置されていた元レンタルサーバ(BIG-NET)では、MySQLが思うように使えませんでした。MovableTypeは、何とか動いていましたが、なぜだか全体的な再構築がどうにも出来ません。これはかなり不便でした。おそらくMySQLで一般ユーザが使える権限が少し足りないのだと思います。

 また、記事の投稿にしても、途中でずっこける事が多々あり、過去何度も辛い思いをしていました。これは、MySQLの属しているサーバーが非力だからだと思います。

 BIG-NET様、MySQLを正式リリースして使えるようにしないと客が逃げますよー。

 ...残りの記事を読む

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