CODEWITHSUNDEEP
csshtmliframeionic-frameworkmedia-queries
Thinker
Thinker

Reputation: 5356

ionic web app YouTube video

I have an Ionic app which is deployed as a web app, wherein I have YouTube videos to display. On small screen the video looks perfect- it fits the small screen and scrolling is smooth. However, on desktop on a large screen (my laptop screen) video occupies the entire space and looks too big and it's hard to scroll. I have attached screenshots for both.

My video.html file looks like this:

<!-- Here goes the video -->
<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>Sie haben die Übung bereits bewertet. Eine neu Intensitätsstufe wird morgen verwendet.</h4>
</div>

My style.css:

/* 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%;
}

enter image description hereenter image description here

How can I show the video on desktop screen in a better way (a bit small in size and perhaps centered)?

Upvotes: 1

Views: 283

Answers (2)

Pablo M&#225;ximo
Pablo M&#225;ximo

Reputation: 467

I probably do a media query like this:

@media screen and (min-device-width: 1200px){
   .video-container iframe {
     position: absolute;
     top:0;
     left: 12%;
     width: 75%;
     height: 100%;
   }  
}

the width and the way to center the video is on you, hope this could help you. Regards.

Upvotes: 1

Goombah
Goombah

Reputation: 2855

Something like this in your CSS:

@media only screen and (min-width : 1224px) {
.video-container iframe
{
  width: 600px;
  margin: 0 auto;
}

Upvotes: 1

Related Questions