etoiledebethleem/website
3
1
Fork 0
Code Issues 6 Pull requests Projects 1 Releases Packages Activity Actions

fix(adhesion): play icon cover

Browse source
This commit is contained in:
Matthieu Bessat 2023-07-14 15:24:20 +02:00
parent 57d077438b
commit 987555c944
5 changed files with 206 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

58
layouts/adhesion/list.html
View file

@ -1,22 +1,25 @@
{{ define "main" }}
<div class="root">
<div class="adhesion-container">
<div class="video-presentation">
<!-- <!-1- <iframe -1-> -->
<!-- <!-1- title="Campagne d'adhésion 2023-2024 - L'étoile de Bethléem" -1-> -->
<!-- <!-1- width="100%" height="950" -1-> -->
<!-- <!-1- src="https://peertube.iriseden.eu/videos/embed/575e83c9-2dd5-464c-a31e-c2aae1bfd48b?p2p=0" -1-> -->
<!-- <!-1- frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"> -1-> -->
<!-- <!-1- </iframe> -1-> -->
<iframe
width="100%"
src="https://www.youtube.com/embed/vJeEqDfz_4c"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
<div class="video-presentation video-presentation-cover" id="video-cover">
<div class="video-cover__back">
{{ partial "helpers/svg" (dict "path" "all_logos/square_notext_white_transparent" "class" "back-icon") }}
<!-- {{ partial "helpers/svg" (dict "path" "all_logos/horizontal_white_transparent" "class" "back-icon") }} -->
</div>
<div id="video-play-btn" class="video-cover__content">
<button>
{{ partial "helpers/svg" (dict "path" "icons/circle-play" "class" "btn-icon") }}
</button>
<p>Regarder le teaser</p>
</div>
</div>
<div class="video-presentation final-video-presentation" style="display: none;" id="final-video-container">
<!-- <!-1- <iframe -1-> -->
<!-- <!-1- title="Campagne d'adhésion 2023-2024 - L'étoile de Bethléem" -1-> -->
<!-- <!-1- width="100%" height="950" -1-> -->
<!-- <!-1- src="https://peertube.iriseden.eu/videos/embed/575e83c9-2dd5-464c-a31e-c2aae1bfd48b?p2p=0" -1-> -->
<!-- <!-1- frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"> -1-> -->
<!-- <!-1- </iframe> -1-> -->
</div>
</div>
<div class="adhesion-footer">
@ -57,5 +60,28 @@
</div>
<script>
let iframe_html = `<iframe
width="100%"
src="https://www.youtube.com/embed/vJeEqDfz_4c?autoplay=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>`;
let btn = document.getElementById("video-play-btn")
const video_cover = document.getElementById("video-cover")
const final_video_container = document.getElementById("final-video-container")
btn.onclick = () => {
video_cover.style.display = "none"
final_video_container.innerHTML = iframe_html
final_video_container.style.display = "block"
}
</script>
{{ end }}