On my page, I plan to showcase a video specifically for desktop browsers. I have devised some code to determine whether the video is in landscape or portrait orientation. The challenge lies in deciding what to do based on this orientation: If the video is in portrait mode, it should be displayed accordingly (playing where the balloons are positioned). However, if the video is in landscape mode, I simply want it to fill the space minus a margin along with the black background.
https://i.sstatic.net/RsEFR.jpg
Below is the HTML snippet:
<div id="vidmodal" class="video-wrapper" ng-show="vm.showVideo">
<img src="public/img/cancel-music.svg" alt="" id="closeX">
<video src="{{vm.event.videoUrl}}" id="vid" loop autoplay muted poster="{{vm.event.imageUrl}}"></video>
</div>
JS Function:
function clickPlay() {
vm.hasVideo = false; //hide the text-and-play-button div
vm.showVideo = true; //show the video which is default hidden (false)
var bgVideo = document.getElementById("vid");
if (bgVideo.videoWidth > bgVideo.videoHeight){
console.log('landscape vid');
$('.rsvpbox').css('background-color', 'RGBA(255,255,255,0.6)');
} else if (bgVideo.videoWidth < bgVideo.videoHeight){
console.log('portrait vid');
$('.rsvpbox').css('background-color', 'RGBA(255,255,255,0.6)');
$('.rsvpbox').css('left', '80px');
$('#vid').css('max-width', '320px !important');
} else {
$('.rsvpbox').css('background-color', 'RGBA(255,255,255,0.6)');
}
}
CSS Styling:
@media screen and (min-width: 1024px)
{
#vidmodal
{
position: absolute;
left: 0;
width: 100%;
height: 100%;
background-color: black;
z-index: 9999999;
}
#closeX
{
position: absolute;
right: 0;
z-index: 99999999;
}
#closeX:hover
{
cursor: hand;
cursor: pointer;
}
video
{
z-index: 9999999;
position: absolute;
left: 0;
}
.btnBox
{
padding-left: 15px;
padding-right: 15px;
width: 550px !important;
position: relative;
right: 70px;
}
}