离子网络应用 YouTube 视频

Question

我有一个部署为 Web 应用程序的 Ionic 应用程序，其中我有 YouTube 视频要显示。在小屏幕上，视频看起来很完美——它适合小屏幕，滚动也很流畅。但是，在桌面大屏幕（我的笔记本电脑屏幕）上，视频占据了整个 space 并且看起来太大而且难以滚动。我附上了两者的屏幕截图。

我的 video.html 文件如下所示：

<!-- 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>

我的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%;
}

如何以更好的方式在桌面屏幕上显示视频（尺寸有点小，可能居中）？

Answer 1

你的 CSS 中有这样的内容：

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

Answer 2

我可能会做这样的媒体查询：

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

视频的宽度和居中方式由您掌握，希望对您有所帮助。问候。

离子网络应用 YouTube 视频

ionic web app YouTube video

html

css

iframe

media-queries

ionic-framework