Skip to content

Commit 782c379

Browse files
moacirmodamoacirmoda
committed
adjusting youtube thumbnails to load video only when clicked
1 parent 01a54d4 commit 782c379

10 files changed

Lines changed: 90 additions & 59 deletions

File tree

‎pythonpro/core/static/img/social-proof/alysson.webp‎

20.1 KB
Loading

‎pythonpro/core/static/img/social-proof/diego.webp‎

21.9 KB
Loading

‎pythonpro/core/static/img/social-proof/fabricio.webp‎

22.6 KB
Loading

‎pythonpro/core/static/img/social-proof/ferrabras.webp‎

16.8 KB
Loading

‎pythonpro/core/static/img/social-proof/isaac.webp‎

20.9 KB
Loading

‎pythonpro/core/static/img/social-proof/marcelo.webp‎

20.3 KB
Loading

‎pythonpro/core/static/img/social-proof/testando-o-mercado.webp‎

20.2 KB
Loading

‎pythonpro/core/static/img/social-proof/vicente.webp‎

15.9 KB
Loading

‎pythonpro/core/static/img/social-proof/vinicius.webp‎

23.9 KB
Loading

‎pythonpro/core/templates/core/social_proof.html‎

Lines changed: 90 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,117 @@
1+
{% load static %}
2+
13
<div class="row title">
24
<div class="col">
35
<h1 class="text-center mb-4">Alunos Transformados</h1>
46
</div>
57
</div>
68
<div class="row">
79
<div class="col-12 col-md mb-4">
8-
<div class="embed-container">
9-
<iframe width="560" height="315" src="https://www.youtube.com/embed/p-7b3LYxXPc" frameborder="0"
10-
allowfullscreen></iframe>
11-
</div>
10+
<a href='#' class='img-testimonial' data-toggle='modal'
11+
data-target="#idModalTestimonial" data-youtube-id="p-7b3LYxXPc">
12+
<img src='{% static 'img/social-proof/fabricio.webp' %}' class='img-fluid lazy'>
13+
</a>
1214
</div>
13-
<div class="col-12 col-md mb-md-0 mb-4">
14-
<div class="embed-container">
15-
<iframe width="560" height="315" src="https://www.youtube.com/embed/Qg8LmM2Sfxg" frameborder="0"
16-
allowfullscreen></iframe>
17-
</div>
15+
16+
<div class="col-12 col-md mb-4">
17+
<a href='#' class='img-testimonial' data-toggle='modal'
18+
data-target="#idModalTestimonial" data-youtube-id="Qg8LmM2Sfxg">
19+
<img src='{% static 'img/social-proof/testando-o-mercado.webp' %}' class='img-fluid lazy'>
20+
</a>
1821
</div>
19-
<div class="col-12 col-md mb-md-0 mb-4">
20-
<div class="embed-container">
21-
<iframe width="560" height="315" src="https://www.youtube.com/embed/TtlB4E7_MZM" frameborder="0"
22-
allowfullscreen></iframe>
23-
</div>
22+
<div class="col-12 col-md mb-4">
23+
<a href='#' class='img-testimonial' data-toggle='modal'
24+
data-target="#idModalTestimonial" data-youtube-id="TtlB4E7_MZM">
25+
<img src='{% static 'img/social-proof/ferrabras.webp' %}' class='img-fluid lazy'>
26+
</a>
2427
</div>
2528
</div>
29+
2630
<div class="row">
2731
<div class="col-12 col-md mb-4">
28-
<div class="embed-container">
29-
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZNsU9KLVkoM" frameborder="0"
30-
allowfullscreen></iframe>
31-
</div>
32+
<a href='#' class='img-testimonial' data-toggle='modal'
33+
data-target="#idModalTestimonial" data-youtube-id="ZNsU9KLVkoM">
34+
<img src='{% static 'img/social-proof/isaac.webp' %}' class='img-fluid lazy'>
35+
</a>
3236
</div>
33-
<div class="col-12 col-md mb-md-0 mb-4">
34-
<div class="embed-container">
35-
<iframe width="560" height="315" src="https://www.youtube.com/embed/0HP2nS44Ip4" frameborder="0"
36-
allowfullscreen></iframe>
37-
</div>
37+
<div class="col-12 col-md mb-4">
38+
<a href='#' class='img-testimonial' data-toggle='modal'
39+
data-target="#idModalTestimonial" data-youtube-id="0HP2nS44Ip4">
40+
<img src='{% static 'img/social-proof/alysson.webp' %}' class='img-fluid lazy'>
41+
</a>
3842
</div>
39-
<div class="col-12 col-md mb-md-0 mb-4">
40-
<div class="embed-container">
41-
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZNgfS9Ohwac" frameborder="0"
42-
allowfullscreen></iframe>
43-
</div>
43+
<div class="col-12 col-md mb-4">
44+
<a href='#' class='img-testimonial' data-toggle='modal'
45+
data-target="#idModalTestimonial" data-youtube-id="ZNgfS9Ohwac">
46+
<img src='{% static 'img/social-proof/marcelo.webp' %}' class='img-fluid lazy'>
47+
</a>
4448
</div>
4549
</div>
50+
4651
<div class="row">
4752
<div class="col-12 col-md mb-4">
48-
<div class="embed-container">
49-
<iframe width="560" height="315" src="https://www.youtube.com/embed/SwGDBRrjyf0" frameborder="0"
50-
allowfullscreen></iframe>
51-
</div>
53+
<a href='#' class='img-testimonial' data-toggle='modal'
54+
data-target="#idModalTestimonial" data-youtube-id="SwGDBRrjyf0">
55+
<img src='{% static 'img/social-proof/diego.webp' %}' class='img-fluid lazy'>
56+
</a>
5257
</div>
53-
<div class="col-12 col-md mb-md-0 mb-4">
54-
<div class="embed-container">
55-
<iframe width="560" height="315" src="https://www.youtube.com/embed/3g0g4atd858" frameborder="0"
56-
allowfullscreen></iframe>
57-
</div>
58+
<div class="col-12 col-md mb-4">
59+
<a href='#' class='img-testimonial' data-toggle='modal'
60+
data-target="#idModalTestimonial" data-youtube-id="avyZ4WjluEo">
61+
<img src='{% static 'img/social-proof/vinicius.webp' %}' class='img-fluid lazy'>
62+
</a>
5863
</div>
59-
<div class="col-12 col-md mb-md-0 mb-4">
60-
<div class="embed-container">
61-
<iframe width="560" height="315" src="https://www.youtube.com/embed/avyZ4WjluEo" frameborder="0"
62-
allowfullscreen></iframe>
63-
</div>
64+
<div class="col-12 col-md mb-4">
65+
<a href='#' class='img-testimonial' data-toggle='modal'
66+
data-target="#idModalTestimonial" data-youtube-id="J4uv2lk_rZ0">
67+
<img src='{% static 'img/social-proof/vicente.webp' %}' class='img-fluid lazy'>
68+
</a>
6469
</div>
6570
</div>
66-
<div class="row mt-3">
67-
<div class="col-12 col-md mb-md-0 mb-4">
68-
<div class="embed-container">
69-
<iframe width="560" height="315" src="https://www.youtube.com/embed/J4uv2lk_rZ0" frameborder="0"
70-
allowfullscreen></iframe>
71-
</div>
72-
</div>
7371

74-
<div class="col-12 col-md mb-md-0 mb-4">
75-
<div class="embed-container">
76-
<iframe width="560" height="315" src="https://www.youtube.com/embed/tICJmFSxuJg" frameborder="0"
77-
allowfullscreen></iframe>
78-
</div>
72+
<div class="row">
73+
{% comment %} <div class="col-12 col-md mb-4">
74+
<a href='#' class='img-testimonial' data-toggle='modal'
75+
data-target="#idModalTestimonial" data-youtube-id="3g0g4atd858">
76+
<img src='{% static 'img/social-proof/fabricio.webp' %}' class='img-fluid lazy'>
77+
</a>
78+
</div> {% endcomment %}
79+
{% comment %} <div class="col-12 col-md mb-4">
80+
<a href='#' class='img-testimonial' data-toggle='modal'
81+
data-target="#idModalTestimonial" data-youtube-id="tICJmFSxuJg">
82+
<img src='{% static 'img/social-proof/fabricio.webp' %}' class='img-fluid lazy'>
83+
</a>
7984
</div>
80-
<div class="col-12 col-md">
81-
<div class="embed-container">
82-
<iframe width="560" height="315" src="https://www.youtube.com/embed/CSuz1aYsaic" frameborder="0"
83-
allowfullscreen></iframe>
85+
<div class="col-12 col-md mb-4">
86+
<a href='#' class='img-testimonial' data-toggle='modal'
87+
data-target="#idModalTestimonial" data-youtube-id="CSuz1aYsaic">
88+
<img src='{% static 'img/social-proof/fabricio.webp' %}' class='img-fluid lazy'>
89+
</a>
90+
</div> {% endcomment %}
91+
</div>
92+
93+
94+
<div class="modal fade" id="idModalTestimonial" tabindex="-1" role="dialog" aria-hidden="true">
95+
<div class="modal-dialog modal-lg" role="document">
96+
<div class="modal-content">
97+
<div class="modal-body text-center">
98+
<iframe id='youtubeTestimonialEmbed' width="711" height="400" src="" frameborder="0"></iframe>
8499
</div>
85100
</div>
86-
</div>
101+
</div>
102+
</div>
103+
104+
<script>
105+
$(function(){
106+
$(".img-testimonial").click(function(el) {
107+
var youtube_id = $(this).data('youtube-id');
108+
var url = "https://www.youtube.com/embed/"+ youtube_id +"?rel=0&showinfo=0&autoplay=1 "
109+
110+
$("#youtubeTestimonialEmbed").attr('src', url)
111+
});
112+
113+
$('#idModalTestimonial').on('hide.bs.modal', function (event) {
114+
$("#youtubeTestimonialEmbed").attr('src', '')
115+
})
116+
});
117+
</script>

0 commit comments

Comments
 (0)