アプリなどを開発するブログ

React Native / Swift / Ruby on Railsなどの学習メモ。


YouTubeの埋込動画の表示を別途用意した画像にする

YouTube動画をHTMLに埋め込むと、
再生されていない状態では、おなじみのプレイヤーとサムネイルが表示されますが、
デザインとの兼ね合いなどで、サムネイルではなく別途用意した画像を表紙にしたい場合があります。

以下のようにすれば可能でした。

<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'">
    <img src="IMAGE_PATH_URL" style="cursor:pointer" />
</div>
<div id="thevideo" style="display:none">
    <!-- ここに埋込コードを挿入 -->
</div>

参考
http://orangecountycustomwebsitedesign.com/change-the-youtube-embed-image-to-custom-image/