tumblrのYouTube埋め込み表示がカッコイイ

tumblr Logo

最近tumblrのダッシュボードで流れるYouTubeの埋め込み表示が変わって「お!」な感じだったので調べてみました。

まずYouTubeの動画を普通に貼りつけると、こうなります。

特にこれでも問題ないというか、Youtubeの特徴的な再生ボタンのおかげで十分動画だと分かります。しかし最近のタンブラーの動画サムネはこのように変わりました。

 

ノイズのおかげで動画みたい

Play

面白いですね。ノイズが動いているおかげで、より動画っぽい印象が増しています。

劇的な変化でもないし、良くなったか悪くなったかは微妙な所ではありますが、個人的にはタンブラーらしい変化かなと思いました。※タンブラーは機能が増えるよりも減ることに喜びを感じる思想を持ってます。

というわけで、ソースを覗いて実現法を見てみましょう。

 

実装方法

通常のYoutubeの埋め込みコードはこちらです。iframe一行のみ。

<iframe loading="lazy" width="560" height="315" src="//www.youtube.com/embed/I-pzol0sxro" frameborder="0" allowfullscreen></iframe>

一方、タンブラーの新しい動画サムネはやや面倒なことをしています。肝心な部分だけを取り除いたHTMLは、こんな感じに。

<div class="retro_video_preview" style="width: 560px; height: 315px;" id="I-pzol0sxro">
<div class="retro_thumbnail" style="background-image: url('https://i.ytimg.com/vi/I-pzol0sxro/0.jpg');"></div>
<div class="retro_fuzz"></div>
<div class="big_play_button">
<span>Play</span>
</div>
</div>

video_static_animatedいくつかのdivで構成されています。YouTubeのサムネ画像はAPIで取得できるので、そのjpgをバックグラウンドに敷き、その上にノイズの動画GIFを透明度付きで被せています。

tumblrでは最小の120×90のサムネが使われていましたが、このページのサムネは320×240を使用しました。

YouTubeのサムネ取得URL
120×90
Normal
https://i.ytimg.com/vi/I-pzol0sxro/default.jpg
YouTubeサムネイルNormal
120×90
Part 1
https://i.ytimg.com/vi/I-pzol0sxro/1.jpg
YouTubeサムネイルPart 1
120×90
Part 2
https://i.ytimg.com/vi/I-pzol0sxro/2.jpg
YouTubeサムネイルPart 2
120×90
Part 3
https://i.ytimg.com/vi/I-pzol0sxro/3.jpg
YouTubeサムネイルPart 3
320×240https://i.ytimg.com/vi/I-pzol0sxro/0.jpg
YouTubeサムネイル320x240
css
.retro_video_preview .retro_fuzz {
    opacity: .08;
    background: transparent url('video_static_animated.gif') 0 0 repeat;
}

クリックされたらJavaScriptでオリジナルのiframeに差し替えます。すでに再生がクリックされた後なので、自動的に再生が始まるようにautoplayを追加しておきます。

JavaScript
$('.retro_video_preview').click(function(){
    $(this).html('<iframe loading="lazy" width="560" height="315" src="//www.youtube.com/embed/'+$(this).attr('id')+'?autoplay=1" frameborder="0" allowfullscreen></iframe>');
});

jQueryプラグインにしたら面白いかもですね。

 

プログラミングで悩んだ時は

93%の回答率が売りのエンジニアのための無料Q&Aサイト「teratail」。長く悩んでも答えが出ない時の為に、登録しておけば助かるかもしれません。