Untitled
unknown
plain_text
5 months ago
4.1 kB
2
Indexable
Never
<!DOCTYPE html> <html> <head> <title>Video Preview</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f4f4f4; } .container { display: flex; justify-content: center; align-items: flex-start; } .video-container { width: 60%; margin-right: 20px; } .video-container iframe { width: 100%; height: 400px; } .video-options { width: 40%; display: flex; flex-wrap: wrap; justify-content: flex-start; } .video-option { cursor: pointer; margin: 10px; border: 2px solid #ddd; border-radius: 4px; overflow: hidden; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); transition: box-shadow 0.3s ease; } .video-option:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .video-option video { width: 100%; height: auto; } </style> </head> <body> <div class="container"> <div class="video-container"> <iframe id="left-video" src="" frameborder="0" allowfullscreen></iframe> </div> <div class="video-options"> <div class="video-option" data-video="https://www.youtube.com/embed/EngW7tLk6R8?autoplay=1&mute=1"> <video src="https://www.youtube.com/embed/EngW7tLk6R8" controls poster="https://img.youtube.com/vi/EngW7tLk6R8/maxresdefault.jpg"></video> </div> <div class="video-option" data-video="https://www.youtube.com/embed/K4TOrB7at0Y?autoplay=1&mute=1"> <video src="https://www.youtube.com/embed/K4TOrB7at0Y" controls poster="https://img.youtube.com/vi/K4TOrB7at0Y/maxresdefault.jpg"></video> </div> <div class="video-option" data-video="https://www.youtube.com/embed/dXIyMS61B68?autoplay=1&mute=1"> <video src="https://www.youtube.com/embed/dXIyMS61B68" controls poster="https://img.youtube.com/vi/dXIyMS61B68/maxresdefault.jpg"></video> </div> <div class="video-option" data-video="https://www.youtube.com/embed/ZPyQh7jjbpE?autoplay=1&mute=1"> <video src="https://www.youtube.com/embed/ZPyQh7jjbpE" controls poster="https://img.youtube.com/vi/ZPyQh7jjbpE/maxresdefault.jpg"></video> </div> <div class="video-option" data-video="https://www.youtube.com/embed/NKaA0IPcD_Q?autoplay=1&mute=1"> <video src="https://www.youtube.com/embed/NKaA0IPcD_Q" controls poster="https://img.youtube.com/vi/NKaA0IPcD_Q/maxresdefault.jpg"></video> </div> <!-- Add more video options as needed --> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function () { var leftVideo = document.getElementById('left-video'); var currentVideo = null; // Play the first video initially var firstVideoOption = $('.video-option:first-child'); var firstVideoSrc = firstVideoOption.data('video'); leftVideo.src = firstVideoSrc; currentVideo = firstVideoSrc; $('.video-option').click(function () { var videoSrc = $(this).data('video'); // Check if the clicked video is the same as the current video if (currentVideo !== videoSrc) { // Set the video source for the left video leftVideo.src = videoSrc; currentVideo = videoSrc; } }); }); </script> </body> </html>