Untitled
unknown
plain_text
2 years ago
4.1 kB
3
Indexable
<!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>