Проигрывание клипа с YouTube с заставкой

Для одного из наших проектов потребовалось реализовать проигрывание видео клипа с сервиса YouTube по следующей схеме:

  1. После начальной загрузки страницы видна картинки-заставка.
  2. По клику вместо картинки загружается и начинает проигрываться видеоклип.
  3. После окончания проигрывания все возвращается в исходное состояние.

Демо

See the Pen Picture / YouTube Clip by Kirill Shabunov (@kshabunov) on CodePen.

Особенности реализации

  • Используется YouTube IFrame API.
  • API и клип загружаются только после первого клика на картинку. Таким образом, если пользователь не заинтересовался видео, то ничего неиспользуемого не загружается.
  • API загружается по асинхронной схеме.
Веб-разработка