YouTubeの埋め込みが表示されるようにした

[neko314]

Fix: #540

<object> <param> <embed>タグを使って記事中に埋め込もうとしたYouTubeが本番環境では全く表示されない状態になっていたのを修正しました。

変更前だと、例えば以下のような記述は

<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/lzmkQSZ9ftI" /><embed src="http://www.youtube.com/v/lzmkQSZ9ftI" type="application/x-shockwave-flash" width="560" height="315" /></object>

ローカル環境では、以下のようなHTMLとして変換されていました。ローカルでは埋め込み表示、再生ともに問題なく動いています。

<div class="ytp-cued-thumbnail-overlay" data-layer="4" style=""><div class="ytp-cued-thumbnail-overlay-image" style="background-image: url(&quot;https://i.ytimg.com/vi/lzmkQSZ9ftI/maxres2.jpg?sqp=-oaymwEoCIAKENAF8quKqQMcGADwAQH4Ad4EgAK4CIoCDAgAEAEYZSBhKFYwDw==&amp;rs=AOn4CLD7dGYTluFXgOCn9fXPuXwdHo-yTA&quot;);"></div><button class="ytp-large-play-button ytp-button ytp-large-play-button-red-bg" aria-label="再生" title="再生"><svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg></button></div>

しかし本番環境ではこのようなHTMLになっていました。動作の再生も表示も何もされない状態でした。

<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/lzmkQSZ9ftI"><embed src="http://www.youtube.com/v/lzmkQSZ9ftI" type="application/x-shockwave-flash" width="560" height="315"></object>

この差分の要因は、ローカルでは本リポジトリをbundle exec jekyll serve -I --futureで起動させるが、本番用にはbundle exec jekyll buildしていることを踏まえると、jekyll側にコマンド間の挙動の差異があるのではないかと推測しています。

修正方針としては、

• 本当にjekyllのコマンドの挙動の結果なのかを調べ変換結果を揃える（そのあとにるびま側に修正が必要かもしれないし不要かもしれない）
• るびま側を変更してYouTubeの埋め込み表示をできないか検討する
  * <object>タグ等の使い方が間違っているのであればそれを正すとか、他のタグを使うなどが考えられる

という2点が浮かびました。このPRではるびま側を変更する方針で、具体的には<iframe>を利用することにしました。

理由としは2つあります。

• るびま全体を見てみたところKeebKaigi 2023 準公式参加記録の記事中では、<iframe>を使って本番環境でもYouTubeの埋め込み表示が成功してること、以下のようにローカルと本番での挙動差異がないことから、<iframe>であれば記事中に使って問題ないと言えること

// ローカル環境
<div class="ytp-cued-thumbnail-overlay" data-layer="4" style=""><div class="ytp-cued-thumbnail-overlay-image" style="background-image: url(&quot;https://i.ytimg.com/vi_webp/Lk3-5ceJz4Y/maxresdefault.webp&quot;);"></div><button class="ytp-large-play-button ytp-button ytp-large-play-button-red-bg" aria-label="再生" title="再生"><svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg></button></div>

// 本番環境
<div class="ytp-cued-thumbnail-overlay" data-layer="4" style=""><div class="ytp-cued-thumbnail-overlay-image" style="background-image: url(&quot;https://i.ytimg.com/vi_webp/Lk3-5ceJz4Y/maxresdefault.webp&quot;);"></div><button class="ytp-large-play-button ytp-button ytp-large-play-button-red-bg" aria-label="再生" title="再生"><svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg></button></div>

• YouTubeの動画ページで「共有」 > 「埋め込む」と選択していくと、<iframe>を使ったHTMLが提示されるので、Google的には<iframe/>が前提となっていると考えられること