GrowiでYoutubeの動画を埋め込む

はじめに

最近，Growiと呼ばれるサーバサイドのWikiアプリケーションをさくらVPS上に乗っけて使用するようになった．

しかし，youtubeとかの動画の埋め込み方が不明だったので，当エントリを投稿した．

初めての投稿ドキドキワクワクである．

問題

GrowiはCrowiのフォークでMarkdownのHTMLレンダリングにMarkedを使用している．

<iframe width="560" height="315" src="https://www.youtube.com/embed/RQWejyx0gi8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

これは，youtubeの共有から自動生成される動画埋め込み用のHTMLタグで，HTMLタグのパースをサポートしているMarkedなら読み込めると信じていた．

無理だった．

解決

結論から言えば，下記のissueeeeeで解決した．

Github: iframe is not parsed #861

上記のissueでもわかる通りiframeはパースせずに無視する様なので<div>要素に属性指定を行いjavascript上で定義することで回避する．

幸いにもGrowiにはカスタムスクリプトを追加できるので，管理→カスタマイズ→カスタムスクリプトに以下のiframe用のコードを記述する．

window.onload = function() {
  var iframes = [].slice.call(document.getElementsByClassName('iframe'));
  for (var i = 0; i < iframes.length; i++) {
    var node = iframes[i];

    var realIframe = document.createElement('iframe');
    realIframe.width = 768;
    realIframe.height = 432;
    realIframe.setAttribute('src', node.getAttribute('src'));
    realIframe.setAttribute('allowfullscreen', true);
    realIframe.setAttribute('frameborder', '0');

    node.appendChild(realIframe);
  }
};

あとは埋め込みたいページで

<div class="iframe" src="https://www.youtube.com/watch?v=RQWejyx0gi8"></div>

を追加することで動画の埋め込みができる筈．

余談

iframeはHTML4で非推奨だったことがMarkedのパース無視に大きく関係しているんじゃないかと思う．

しかし，よくよく調べてみるとHTML5ではiframeの非推奨は解除されているらしく，例のごとくw3cでチェックしてもエラーを出すことは無い．

その為か，愛用しているMarkdownエディタであるBoostnoteでは，iframe無視されなかった．

しかし，Youtubeが吐き出す自動生成の共有用埋め込みタグには平気でallowやframeborderといったHTML5で廃止になった引数が含まれているので要注意．