Вы можете сделать это, создав собственный класс video-chat-row
.Обратите внимание, что при использовании класса embed-responsive-16by9
нельзя ожидать, что классы row
и col-x
будут работать нормально.Вы должны создать свои собственные переопределения.
.video-chat-row {
display: flex;
width: 100%;
position: relative;
}
#video_container {
flex: 0 0 75%;
background-color: black;
}
#chat_container {
position: absolute;
width: 25%;
left: 75%;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body class='container-fluid mx-auto' style='width: 95%'>
<div class='video-chat-row'>
<div
id='video_container'
class='
embed-responsive
embed-responsive-16by9
card card-body rounded-0 border-0' >
<div id='player'></div>
</div>
<div
id='chat_container'
class='card card-body rounded-0'>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<p>Proin tincidunt aliquam efficitur. Cras laoreet in nulla id porttitor. Aliquam gravida, ex vulputate aliquam placerat, enim orci maximus turpis, ac lobortis quam urna eget nulla. In vel elit diam. Pellentesque fermentum a dolor sed venenatis. Praesent sit amet vulputate purus, vitae laoreet leo. Vivamus sed volutpat nunc. Nam nunc ex, auctor quis purus at, vulputate interdum enim. Maecenas non tincidunt purus, eget imperdiet lacus. Proin in dictum enim, vitae sodales tortor. Vivamus gravida finibus viverra. Nulla tempor vestibulum lorem. Morbi placerat blandit iaculis. Mauris cursus ex nibh, ornare gravida velit porta commodo. In sit amet mattis leo, at congue magna. Maecenas eu consectetur nulla.</p>
<p>Quisque et lorem vitae nisi efficitur vehicula id vel nibh. Sed in felis tellus. Nulla viverra augue vel pretium tempus. Proin laoreet lectus ac nisl consectetur, sed mollis sem malesuada. Vivamus id lacinia erat, vel mollis eros. Ut aliquam pretium diam, ac efficitur ipsum aliquam ut. Nullam vel elit orci. Cras in malesuada nunc. Suspendisse elit lectus, tincidunt eu purus ac, consequat faucibus lacus. Sed aliquet risus ut ligula gravida, a lobortis massa pellentesque. In molestie ut sapien nec mollis. Proin a mattis diam, ut imperdiet risus. Donec id nulla massa. Donec nec mi non lacus ultricies pharetra. Morbi magna odio, sollicitudin ut lobortis at, tempus nec sem. Aliquam non ligula nec ante pharetra dapibus eu sed augue.</p>
</div>
</div>
</body>