There are three videos in a column. I need that in the mobile version these videos can be scrolled through like in a slider. Can you tell in which direction to go? I wrote this:
css:
.video__list iframe { width: 100%; height: 116px; } .video__head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px; } @media (max-width: 767px) { .video__list iframe { width: 100%; height: 160px; } }
html:
<div class="video border"> <div class="video__head"> <i class="fab fa-youtube"></i> <a class="sidebar-title" href="videos.html">Videos</a> </div> <div class="video__list"> <iframe src="https://www.youtube.com/embed/GKSRyLdjsPA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <p>Lorem Ipsum</p> <iframe src="https://www.youtube.com/embed/GKSRyLdjsPA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <p>Lorem Ipsum</p> <iframe src="https://www.youtube.com/embed/GKSRyLdjsPA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <p>Lorem Ipsum</p> </div> </div>
But here they just go top-down in the mobile version, I don’t know how to scroll only for the mobile version, that is, as a slider.