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

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

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

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

 

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

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

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

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

 

実装方法

通常の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>

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

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

YouTubeのサムネ取得URL

120×90 Normal	https://i.ytimg.com/vi/I-pzol0sxro/default.jpg
120×90 Part 1	https://i.ytimg.com/vi/I-pzol0sxro/1.jpg
120×90 Part 2	https://i.ytimg.com/vi/I-pzol0sxro/2.jpg
120×90 Part 3	https://i.ytimg.com/vi/I-pzol0sxro/3.jpg
320×240	https://i.ytimg.com/vi/I-pzol0sxro/0.jpg

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プラグインにしたら面白いかもですね。