I'm working on an HTML page that needs to display two different videos in separate modals.
My goal is to have each video start playing automatically when the play-video icon is clicked and the modal opens. I attempted this using the code snippet (video.forEach(video => video.play());), but both videos start playing simultaneously.
Additionally, I need the video to pause and the modal to close if the user clicks outside of the modal or on the modal-close area. To achieve this, I used the following code: (video.forEach(video => video.pause());).
The task must be completed with JavaScript alone.
Your assistance in advance is greatly appreciated.
// modal and video
var modal = document.getElementsByClassName("modal");
var playVideo = document.getElementsByClassName("play-video");
var modalClose = document.getElementsByClassName("modal--close");
var video = document.querySelectorAll('video');
function setDataIndex() {
for (i = 0; i < playVideo.length; i++){
playVideo[i].setAttribute('data-index', i);
modal[i].setAttribute('data-index', i);
modalClose[i].setAttribute('data-index', i);
video.forEach(video => video.play());
}
}
for (i = 0; i < playVideo.length; i++){
playVideo[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modal[ElementIndex].style.display = "block";
};
modalClose[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modal[ElementIndex].style.display = "none";
video.forEach(video => video.pause());
};
}
window.onload = function() {
setDataIndex();
};
window.onclick = function(event) {
if (event.target === modal[event.target.getAttribute('data-index')]) {
modal[event.target.getAttribute('data-index')].style.display = "none";
video.forEach(video => video.pause());
}
};
// modal and video:root{
/* colors */
--cws: #121214; /*color name: Woodsmoke RGB: 18, 18, 20 */
--clo: #2A827c; /*color name: Lochinvar RGB: 42, 130, 124 */
--cpr: #3CBBB0; /*color name: Puerto Rico RGB: 60, 187, 176 */
--cwa: #7C809B; /*color name: Waterloo RGB: 124, 128, 155 */
--csp: #F5EDF0; /*color name: Soft Peach RGB: 245, 237, 240 */
--cwh: #FFFFFF; /*color name: White RGB: 255, 255, 255 */
}
.play-video{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: green;
}
/* modal */
.modal{
display: none;
position: fixed;
z-index:13;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
overflow-y: hidden;
background: rgba(124, 128, 155,.8);
}
.modal.active{
display: flex;
align-items: center;
justify-content: center;
}
.modal--content {
margin: auto;
width: 50%;
height: auto;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.modal--header{
text-align: right;
position: absolute;
top: 20px;
right: 30px;
}
.modal--close{
color: var(--cws);
font-size: 3rem;
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
}
.modal--close:hover,
.modal--close:focus {
color: var(--csp);
cursor: pointer;
}
.modal--body{
width: 100%;
height: 100%;
}
.modal--body video{
width: 100%;
height: 100%;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border: 15px solid var(--csp);
}
/* modal */<!-- icon play -->
<div class="play-video"></div>
<div class="play-video"></div>
<!-- icon play -->
<!-- The Modal -->
<div class="modal">
<div class="modal--header">
<span class="modal--close">×</span>
</div>
<div class="modal--content">
<div class="modal--body">
<video controls class="inlineVideo" autoplay="autoplay">
<source src="https://www.youtube.com/watch?v=sgNkCrAhTGc" >
</video>
</div>
</div>
</div>
<!-- The Modal -->
<!-- The Modal -->
<div class="modal">
<div class="modal--header">
<span class="modal--close">×</span>
</div>
<div class="modal--content">
<div class="modal--body">
<video controls class="inlineVideo" autoplay="autoplay">
<source src="https://www.youtube.com/watch?v=YZ0cJiVr2-w" >
</video>
</div>
</div>
</div>
<!-- The Modal -->