Here is a layout defined using Bootstrap:
<div class="container-fluid">
<div onclick="smallSize()">Click</div>
<div onclick="largeSize()">Click</div>
<div class="row">
<!--Video player-->
<div class="video-player-content col-7" style="max-width:720px;">
<video id="preview" width="720px" height="360px">
<source/>
</video>
</div>
<!--Sidebar content-->
<div class="sidebar-card col-5">
<p>Some content</p>
</div>
</div>
</div>
There are 2 icons for changing the size of the video player, similar to a YouTube feature. When clicked, they modify the size of the video player using JQuery.
function smallSize() {
var video = document.getElementById("preview");
video.height = 360;
video.width = 720;
document.getElementsByClassName("video-player-content")[0].style.maxWidth = "720";
}
function largeSize() {
var video = document.getElementById("preview");
video.height = 540;
video.width = 1080;
document.getElementsByClassName("video-player-content")[0].style.maxWidth = "1080";
}
The issue arises when switching to the larger player, as the video player col overflows (or underflows) the sidebar. How can the sidebar be pushed below the video player if the user opts for the larger player? I've experimented with col-sm-md-lg and clearfix without success. Setting the maxwidth attribute is crucial due to the canvas positioned on top of the video.