65 lines
1.8 KiB
Plaintext
65 lines
1.8 KiB
Plaintext
@section Style {
|
||
<link rel="stylesheet" href="~/css/Video.css" asp-append-version="true" />
|
||
}
|
||
|
||
<div class="container my-5">
|
||
|
||
<h3 class="text-center fw-bold mb-4">Galeri Video</h3>
|
||
|
||
<div class="row g-4" id="video-list"></div>
|
||
|
||
</div>
|
||
|
||
<div id="videoModal" class="video-modal">
|
||
<div class="video-content">
|
||
<span class="close-btn" onclick="closeVideo()">×</span>
|
||
<iframe id="videoFrame" frameborder="0" allowfullscreen></iframe>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function loadVideo() {
|
||
|
||
fetch('/Video/GetAll')
|
||
.then(res => res.json())
|
||
.then(data => {
|
||
|
||
let html = "";
|
||
|
||
data.forEach(item => {
|
||
html += `
|
||
<div class="col-md-4">
|
||
<div class="youtube-wrapper">
|
||
<iframe
|
||
src="https://www.youtube.com/embed/${item.youtube}"
|
||
title="${item.judul}"
|
||
frameborder="0"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
document.getElementById("video-list").innerHTML = html;
|
||
|
||
});
|
||
}
|
||
|
||
function openVideo(url) {
|
||
document.getElementById("videoFrame").src = url;
|
||
document.getElementById("videoModal").style.display = "flex";
|
||
}
|
||
|
||
function closeVideo() {
|
||
document.getElementById("videoFrame").src = "";
|
||
document.getElementById("videoModal").style.display = "none";
|
||
}
|
||
|
||
document.addEventListener("DOMContentLoaded", loadVideo);
|
||
</script>
|
||
|
||
|
||
|