My application is quite simple, it displays four video streams in a quadrant layout. Users can double click on each video to switch to full-screen mode and then again to go back to the quadrant view, which all works perfectly.
The issue I'm facing involves determining the appropriate placement and size of the embedded objects within my DIVs. Ideally, I want the videos to occupy the entire space of each DIV regardless of how the user resizes their browser window.
Here is the CSS I am using:
.tl {
position: absolute;
top: 0;
left: 0;
right: 50%;
bottom: 50%;
background: white;
}
.tr {
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 50%;
background: white;
}
.bl {
position: absolute;
top: 50%;
left: 0;
right: 50%;
bottom: 0;
background: white;
}
.br {
position: absolute;
top: 50%;
left: 50%;
right: 0;
bottom: 0;
background: white;
}
HTML:
<body>
<div class='tr' id='vlc1'></div>
<div class='tl' id='vlc2'></div>
<div class='bl' id='vlc3'></div>
<div class='br' id='vlc4'></div>
</body>
</html>
And this is my JavaScript:
function play(instance, uri) {
VLCobject.getInstance(instance).play(uri);
}
var player = null;
$(document).ready(function() {
var mydiv = document.getElementById("tr");
player = VLCobject.embedPlayer('vlc1', 400, 300, true);
player.play("http://URL");
player = VLCobject.embedPlayer('vlc2', 400, 300, true);
player.play("http://URL");
player = VLCobject.embedPlayer('vlc3', 400, 300, true);
player.play("http://URL");
player = VLCobject.embedPlayer('vlc4', 400, 300, true);
player.play("http://URL");
});
I've included a jsfiddle link for reference: http://jsfiddle.net/AD4Vp/
It seems like I may need to dynamically adjust the size of the embedded videos. Although I have set fixed sizes (400,300), the videos appear left-oriented in each div, making it challenging to determine the optimal initial size. Any guidance on the best approach to solve this would be greatly appreciated.
Thank you!