На одном из проектов, заказчик хотел использовать GIF с содержанием видео, а после клика по ней должно запуститься видео с YouTube. Реализация оказалась достаточно простой. После того как разместил код на сайте заказчика, решил маленько доделать скрип, чтобы iframe с видео имело указанный размер для фотографии. И можно было разместить таких элементов на странице сколько угодно.
Код PHP #1
<div class="spawnElement">
<img width="560" src="Ссылка на изображение" height="315" v="lNVuabtb0IE">
</div>
STYLE #1
<style>
.spawnElement div{display:none;}
</style>
Код Js #1
$(document).on('click', '.spawnElement img', function(){
var elThis = $(this);
var h = elThis.height();
var w = elThis.width();
elThis.css({ 'display':'none' });
var v = elThis.attr('v');
var iframe = '<iframe autoplay="1" height="'+h+'" width="'+w+'" src="https://www.youtube.com/embed/'+v+'?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
elThis.parent().html(iframe);
} )
Может быть интересно
Комментарии (46)