nicolo/fara-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Test video overlay

Browse Source
This commit is contained in:
Nicolò P 2021-08-05 13:28:42 +02:00
parent edf4104356
commit ca1b821c8d
7 changed files with 69 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/video/vid_prologo.mp4 Normal file
View File

Binary file not shown.

BIN
assets/video/vid_viaggiatore.mp4 Normal file
View File

Binary file not shown.

8
css/main.css
View File

@ -38,6 +38,10 @@
.text-14pt {
font-size: 14pt;
}
video {
max-width: 100%;
cursor: pointer;
}
/** Font classes **/
.arvo {
font-family: 'arvoregular'/*Fallback??*/;
@ -344,4 +348,8 @@ section.poi .container {
}
.lilac {
color: var(--lilac);
}
/** Modals **/
#mod-vid .modal-overlay {
background-color: #555;
}

BIN
img/thumb_nobili.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 367 KiB

BIN
img/thumb_viaggiatore.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 938 KiB

27
itinerario.html
View File

@ -83,7 +83,7 @@
<div class="container">
<div class="columns mb-2">
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
<a href="" title="Guarda il video">
<a href="#open-vid" title="Guarda il video">
<img src="img/thumb_prologo.jpg" alt="Prologo">
</a>
</div>
@ -99,8 +99,8 @@
</p>
</div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
<a href="" title="Guarda il video del viaggiatore">
<img src="img/fara_bg_3.jpg" alt="Viaggiatore #1">
<a href="#open-vid" title="Guarda il video del viaggiatore">
<img src="img/thumb_viaggiatore.jpg" alt="Viaggiatore #1">
</a>
</div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@ -198,7 +198,7 @@
<div class="columns mb-2">
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
<a href="" title="Guarda il video">
<img src="img/Thumbnail_Antonio.jpg" alt="I nobili di Fara">
<img src="img/thumb_nobili.jpg" alt="I nobili di Fara">
</a>
</div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@ -235,6 +235,25 @@
</div>
</div>
</section>
<div class="modal modal-lg modal-fullheight" id="mod-vid">
<a href="#close" class="modal-overlay" aria-label="Close"></a>
<div class="modal-container">
<div class="modal-header">
<a href="#close" class="btn btn-clear float-right" title="Close" aria-label="Close"></a>
<div class="modal-title h5"></div>
</div>
<div class="modal-body">
<div class="content" id="mod-cont">
<video controls>
<source src="assets/video/vid_prologo.mp4" type="video/mp4">
Il browser non supporta i video integrati.
</video>
</div>
</div>
<!-- <div class="modal-footer">
</div> -->
</div>
</div>
</main>
<footer class="roboto">
<p id="copy">&copy; Avviso pubblico Beni Culturali e Turismo POR FESR Lazio 2014-2020</p>

38
js/ui.js
View File

@ -95,4 +95,42 @@ window.addEventListener('load', () => {
document.querySelector('.side-nav').classList.add('d-hide');
document.querySelector('body').classList.remove('opaque');
})
})
/**
* Open / close modal for videos
* and apply video source
*/
window.addEventListener('load', () => {
let vidLinks = Array.from(document.querySelectorAll('a[href="#open-vid"]'));
let source = document.querySelector('source');
let video = source.parentNode;
/**
* Dynamically change video source
* Note naming convention...
*/
vidLinks.forEach(a => {
let aNodes = a.childNodes;
a.addEventListener('click', () => {
aNodes.forEach(n => {
if (n.src) {
let vStr = n.src
.substr(n.src.lastIndexOf('/')+1, n.src.length)
.replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
source.src = `assets/video/${vStr}`;
video.load();
}
});
document.querySelector('#mod-vid').classList.add('active');
});
});
let close = document.querySelectorAll('#mod-vid a[href="#close"]')[1];
close.addEventListener('click', () => {
document.querySelector('#mod-vid').classList.remove('active');
});
})