YouTubeの再生ボタンをデザインに合わせて変える方法

きのう台風すごかったですね!
小学生の頃に自然の力が強い事はポケモンで学んだのですが(?)、風は正直ナメていたのでまた自然の力を痛感しました。。。

今日は某食品メーカーさんのサイトで実装した、Youtubeの再生ボタンをデザインに合わせて変更する方法を紹介したいと思います。
構造は単純で、iframeの上にキャプチャと再生ボタンをかぶせるという構造です!

iframe 組み込みの YouTube Player API を使用し、再生ボタンが押されたらJsでyoutubeを自動再生できるようにします。
*検証環境ではSP・PCともに同様の動きが確認できました。
 

 

HTML

 

CSS

youtubeの黒い背景が枠として、表示されてしまうのを防ぐためwidthを100.5%に指定しています。

Js

 
Youtubeの再生ボタンをデザインに合わせて変更することで、より統一感のあるサイトを作成できると思います。
今回ご紹介したものは決まった動画をサイトにのせる場合に限られてきてしまいますが、是非参考にしてみてください!
 
参考:https://developers.google.com/youtube/iframe_api_reference