Using Bootstrap 4 alignment classes and translateY with margin-top in a custom CSS spinet, plus adding to w-100 to <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> resulted into this:(在自定义CSS <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> w-100使用Bootstrap 4对齐类和带有margin-top translateY ，再在w-100添加<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">结果是：)
.carousel-item video { transform: translateY(-50%); margin-top: 50%; width: 100%; height: auto; }
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-sm-6 d-flex align-items-center"> <div id="carouselExampleControls" class="carousel slide w-100" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="//via.placeholder.com/787x787" alt="First slide"> </div> <div class="carousel-item"> <video id="product-image-BMW?Tailpipe?Trim-0" class="d-block w-100" controls="" preload="auto" muted="" autoplay=""> <source src="https://youtu.be/vjhbm67KW1U?list=PLzgoLd4TRmNrR9m-RwfMtRM8qud3t7kjp" type="video/mp4"> <source src="https://youtu.be/vjhbm67KW1U?list=PLzgoLd4TRmNrR9m-RwfMtRM8qud3t7kjp" type="video/webm"> </video> </div> <div class="carousel-item"> <img class="d-block w-100" src="//via.placeholder.com/787x787" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <div class="col-sm-6 d-flex align-items-center"> <div> <h2>Description</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> </div>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
