<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="video-part position-relative"> <div class="ParallaxVideo"> <video autoplay="" muted="" loop="" id="desktopVideo"> <source src="https://aisinaftermarket.com/Aisin23-1.mp4" type="video/mp4"> </video> <video autoplay="" muted="" loop="" playsinline="" id="mobileVideo"> <source src="https://aisinaftermarket.com/Aisin23-1-480.mp4" type="video/mp4"> </video> <div class="video-text home-text"> <p class="animate-text"> <span class="text-in">AISIN Aftermarket is a trusted and reliable source <br>for high-quality aftermarket automotive components<br> and technology. </span> </p> </div> </div> </section>

.position-relative { position: relative!important; } .ParallaxVideo { height: 100vh; padding-bottom: 50px; padding-top: 50px; } .ParallaxVideo video { position: fixed; top: 50%; left: 50%; z-index: 1; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%,-50%); z-index: -1; } .home-text p{ margin:0; overflow: hidden; text-shadow: #000000 3px 0 10px; } .home-text p span{ display: inline-block; display: none; } .home-text p span.text-in{ display: block; animation: textIn 2s ease; } .home-text p span.text-out{ animation: textOut 2s ease; } @keyframes textIn{ 0%{ transform: translateY(100%); } 100%{ transform: translateY(0%); } } @keyframes textOut{ 0%{ transform: translateY(0%); } 100%{ transform: translateY(-100%); } } .video-text { position: absolute; top: 20%; left: 9%; } .home-text p { margin: 0; overflow: hidden; text-shadow: #000000 3px 0 10px; } .video-text p { font-size: 48px; color: #ffffff; } #mobileVideo { display: none; } @media (max-width: 601px){ .video-text p { font-size: 30px; color: #ffffff; } #mobileVideo { display: block; } #desktopVideo { display: none; } }

<script> const txts=document.querySelector(".animate-text").children, txtsLen=txts.length; let index=0; const textInTimer=5000, textOutTimer=5000; function animateText() { for(let i=0; i<txtsLen; i++){ txts[i].classList.remove("text-in","text-out"); } txts[index].classList.add("text-in"); setTimeout(function(){ txts[index].classList.add("text-out"); },textOutTimer) setTimeout(function(){ if(index == txtsLen-1){ index=0; } else{ index++; } animateText(); },textInTimer); } window.onload=animateText; </script>