I am facing an issue with my Ionic app that is deployed as a web app. The problem arises when displaying YouTube videos on different screen sizes. While the video fits perfectly on small screens and scrolling is smooth, it becomes problematic on larger desktop screens such as my laptop, where the video occupies too much space making it difficult to scroll. I have included screenshots for better understanding of both scenarios.
Below is a snippet from my video.html file:
<!-- Video player section -->
<div ng-show="showVideo" align="center" class="video-container">
<iframe margin="0" padding="0" border="none" width="700" height="400" frameBorder="0"
ng-src="{{exercise_video_url}}">
</iframe>
</div>
<div ng-show="!showVideo">
<h4>You have already rated the exercise. A new intensity level will be used tomorrow.</h4>
</div>
This is how I have styled it in my style.css:
/* Styling the video iframe to fit on mobile devices */
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
https://i.sstatic.net/T0VHr.jpghttps://i.sstatic.net/MEuTP.png
I am looking for suggestions on how to improve the display of the video on desktop screens by reducing its size and possibly centering it.