const colus = document.getElementsByClassName("col-md-3");
const videosone = colus[0].getElementsByTagName('video');
videosone[0].play();
let i = 0;
let j = 0;
myHandlerone(0);
function myHandlerone(i) {
videosone[i].addEventListener("timeupdate", function(e){
if (this.currentTime > 14) {
this.pause();
this.currentTime= 0;
}})
videosone[i].addEventListener('pause',function(e){
if (i < videosone.length - 1) {
j = i + 1;
videosone[j].style.display = "block";
videosone[i].style.display = "none";
videosone[j].play()
i = i + 1;
myHandlerone(i);
} else {
videosone[0].style.display = "block";
videosone[i].style.display = "none";
videosone[0].play()
myHandlerone(0);
}})}
const videostwo = colus[1].getElementsByTagName('video');
videostwo[0].play();
let k = 0;
let l = 0;
myHandlertwo(0);
function myHandlertwo(k) {
videostwo[k].addEventListener("timeupdate", function(e){
if (this.currentTime > 14) {
this.pause();
this.currentTime= 0;
}})
videostwo[k].addEventListener('pause',function(e){
if (k < videostwo.length - 1) {
l = k + 1;
videostwo[l].style.display = "block";
videostwo[k].style.display = "none";
videostwo[l].play()
k = k + 1;
myHandlertwo(k);
} else {
videostwo[0].style.display = "block";
videostwo[k].style.display = "none";
videostwo[0].play()
myHandlertwo(0);
}})}
<div class="col-md-3">
<div id="myvideo" style="width: 100%; height: 400px; overflow: hidden;">
<video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/hren1brbm_1080__D.mp4"></video>
<video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/kpll3r_1080__D.mp4"></video>
<video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/artist-drawing-henna-tattoo-on-woman-hand-in-india_rovjoopfdg_1080__D.mp4"></video>
<video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/bjfexlpu__d_1080__D.mp4"></video>
<video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/videoblocks-gamer-boy-playing-video-games-on-smartphone_bceuskkvv_1080__D.mp4"></video>
<video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/videoblocks-worker-at-factory-welding_bue3j8esmx_1080__D.mp4"></video>
<video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/videoblocks-young-grace-woman-practicing-elements-with-aerial-hoop_rneekqvj3f_1080__D.mp4"></video>
<video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/s0xvso2l4v_1080__D.mp4"></video>
</div>
</div>
<div class="col-md-3">
<div id="myvideo" style="width: 100%; height: 400px; overflow: hidden;">
<video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/videoblocks-celebrants-dancing-during-the-color-holi-festival_hfbynffi_1080__D.mp4"></video>
<video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/rs_s4wcvnemng_1080__D.mp4"></video>
<video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/slow-motion-tennis-ball.mp4"></video>
<video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/snake-charmer-in-india.mp4"></video>
<video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/ac0w7f_x_1080__D+(1).mp4"></video>
<video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/ah4rz_1080__D.mp4"></video>
<video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/ah4rz_1080__D.mp4"></video>
<video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/hj.mp4"></video>
<video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/hot-summer-day.mp4"></video>
</div>
</div>
<div class="col-md-6">
<div class="center-table">
<p><span class="about">About Us</span><br><br><span class="subtitle">Viddy is a global social network for mobile video.<br>
Creators entertain the world with their talents.</span><br><br>
<span class="sub">Viddy has team members around the world in Detroit, Los Angeles, San Francisco, Las Vegas, Chicago, New York, Miami, London, Paris, Dubai, Tokyo, Barcelona, Zimbabwe, Kyiv, Singapore, Seoul, Prague, Mumbai, and Moscow. </span>
</p>
</div>
</div>
</div><br>
</div>
<style type="text/css">
.sub{font-family: "Product Sans";
font-weight: 400;
font-size: 22px;
line-height: 20px;
color: #4f535a;
text-decoration: justify !important;}
.subtitle{
font-family: "Product Sans Bold";
font-weight: 400;
font-size: 22px;
line-height: 24px;
color: #161823;
text-align: justify !important;
}
.about{
font-family: "Product Sans Bold";
font-weight: 700;
font-size: 43px;
line-height: 1;
margin-bottom: 20px;
text-align: center;
color: black;
}
.center-table {
display: table;
height: 400px;
background: white;
text-align: justify !important;
}
.center-table p {
text-align: justify !important;
display: table-cell;
margin: 0;
color: black;
font-size: 21px;
padding: 0px;
vertical-align: middle;
}
.row{
padding: 0px;
}
</style>
