Для одного из наших проектов потребовалось реализовать проигрывание видео клипа с сервиса YouTube по следующей схеме:
- После начальной загрузки страницы видна картинки-заставка.
- По клику вместо картинки загружается и начинает проигрываться видеоклип.
- После окончания проигрывания все возвращается в исходное состояние.
Демо
See the Pen Picture / YouTube Clip by Kirill Shabunov (@kshabunov) on CodePen.
Особенности реализации
- Используется YouTube IFrame API.
- API и клип загружаются только после первого клика на картинку. Таким образом, если пользователь не заинтересовался видео, то ничего неиспользуемого не загружается.
- API загружается по асинхронной схеме.
Веб-разработка