intrusive/web
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Youtube API carousel interaction progress (maybe? needs live testing)

Browse Source
This commit is contained in:
Rob Kelly 2025-12-20 17:20:50 -07:00
parent 9ebc9508fa
commit 9d54e0e83b
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
www/index.html
View File

@ -10,6 +10,7 @@
<link href="style.css" rel="stylesheet"> <link href="style.css" rel="stylesheet">
</head> </head>
<body> <body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<div class="overflow-auto d-flex flex-column dvh-100"> <div class="overflow-auto d-flex flex-column dvh-100">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark border-bottom"> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark border-bottom">
@ -59,7 +60,7 @@
<div class="carousel-item active"> <div class="carousel-item active">
<div class="carousel-fit"> <div class="carousel-fit">
<div class="ratio ratio-16x9 d-block"> <div class="ratio ratio-16x9 d-block">
<iframe src="https://www.youtube.com/embed/XxUMn7iG4YM?si=ER9NUp7lmwWF25rx&enablejsapi=1&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> <iframe src="https://www.youtube.com/embed/XxUMn7iG4YM?si=ER9NUp7lmwWF25rx&enablejsapi=1&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen anonymous></iframe>
</div> </div>
</div> </div>
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3"> <div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
@ -187,12 +188,11 @@
}); });
</script> </script>
<script> <script>
(function() { $(document).ready(function() {
// Executes when DOM available $('#gameDemoCarousel').on('slide.bs.carousel', function(event) {
document.getElementById('gameDemoCarousel').on('slide.bs.carousel', function(event) {
players[event.from].pauseVideo(); players[event.from].pauseVideo();
}); });
})(); });
var tag = document.createElement('script'); var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api"; tag.src = "https://www.youtube.com/iframe_api";
@ -210,9 +210,9 @@
} }
function onPlayerStateChange(event) { function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING) { if (event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING) {
document.getElementById("gameDemoCarousel").carousel('pause'); $("#gameDemoCarousel").carousel('pause');
} else { } else {
document.getElementById("gameDemoCarousel").carousel(); $("#gameDemoCarousel").carousel();
} }
} }
</script> </script>