<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="video">
<!-- <img src="assets/img/woman.png" alt="девушка"> -->
<a href="#" class="video-link" id="SfUp1fBXX6w"><img src="https://lineafix.store/assets/img/video-link.jpg.pagespeed.ce.iUU8y6hP14.jpg" alt="видео"></a>
<div class="item">
<h4>Посмотрите, как легко <br>работать с Linea Fix</h4>
<p>Просмотр видео займёт всего 1 минуту</p>
<!-- <img src="assets/img/video-arrow.png" alt="стрелка"> -->
</div>
<iframe width="100%" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
<div class="overlay"></div>
.video iframe {
margin: 100px auto 0;
max-width: 560px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: none;
}
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5);
z-index: 5;
display: none;
cursor: pointer;
}
$('.video-link').click(function(e) {
e.preventDefault();
var iframe = $('.video iframe'),
iframe_url = "https://www.youtube.com/embed/" + this.id + "&autoplay=1&autohide=1";
iframe.attr('src', iframe_url);
$('.overlay').fadeIn();
$('.video iframe').fadeIn();
});
$('.overlay').click(function() {
$('.form-overlay').fadeOut();
$('.overlay').fadeOut();
$('body').css('overflow', 'initial');
$('.video iframe').fadeOut();
var videoID = $('.video iframe').attr('src');
$('.video iframe').attr('src', videoID);
});
$('#videoPlaceholder').click(function (event) {
console.log('CLICK');
var videoSrc = 'https://www.youtube.com/embed/SfUp1fBXX6w';
$(this).reaplceWith('<iframe width="560" height="315" src="' + videoSrc + '" frameborder="0" allowfullscreen></iframe>')
})
// function r(f) {/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
// r(function() {
// $(".video-link").onclick = function() {
// // Создаем iFrame и сразу начинаем проигрывать видео, т.е. атрибут autoplay у видео в значении 1
// var iframe = document.createElement("iframe");
// var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";
// if (this.getAttribute("data-params")) iframe_url+='&'+this.getAttribute("data-params");
// iframe.setAttribute("src",iframe_url);
// iframe.setAttribute("frameborder",'0');
// // Высота и ширина iFrame будет как у элемента-родителя
// iframe.style.width = this.style.width;
// iframe.style.height = this.style.height;
// // Заменяем начальное изображение (постер) на iFrame
// this.parentNode.replaceChild(iframe, this);
// }
// --------------
// if (!document.getElementsByClassName) {
// // Поддержка IE8
// var getElementsByClassName = function(node, classname) {
// var a = [];
// var re = new RegExp('(^| )'+classname+'( |$)');
// var els = node.getElementsByTagName("*");
// for(var i=0,j=els.length; i<j; i++)
// if(re.test(els[i].className))a.push(els[i]);
// return a;
// }
// var videos = getElementsByClassName(document.body,"youtube");
// } else {
// var videos = document.getElementsByClassName("youtube");
// }
// var nb_videos = videos.length;
// for (var i=0; i<nb_videos; i++) {
// // Находим постер для видео, зная ID нашего видео
// videos[i].style.backgroundImage = 'url(http://i.ytimg.com/vi/' + videos[i].id + '/sddefault.jpg)';
// // Размещаем над постером кнопку Play, чтобы создать эффект плеера
// var play = document.createElement("div");
// play.setAttribute("class","play");
// videos[i].appendChild(play);
// videos[i].onclick = function() {
// // Создаем iFrame и сразу начинаем проигрывать видео, т.е. атрибут autoplay у видео в значении 1
// var iframe = document.createElement("iframe");
// var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";
// if (this.getAttribute("data-params")) iframe_url+='&'+this.getAttribute("data-params");
// iframe.setAttribute("src",iframe_url);
// iframe.setAttribute("frameborder",'0');
// // Высота и ширина iFrame будет как у элемента-родителя
// iframe.style.width = this.style.width;
// iframe.style.height = this.style.height;
// // Заменяем начальное изображение (постер) на iFrame
// this.parentNode.replaceChild(iframe, this);
// }
// }
//});
