"Load iframe Youtube video after click Jquery"
Bootstrap 4.1.1 Snippet by blackgirl

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$('.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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Dark Edition
Fancy subscribe modal (md, lg) with delay functionality on page load
Watch card / Artist Profile / Youtube list
Video list thumbnails

Questions / Comments: