iframe 如何跟著 RWD 網站縮放

iframe, RWD, YouTube video player 好文章留存。

參考原文

iframe 如何跟著 RWD 網站縮放 - MonkianerMonkianer

iframe 如何跟著 RWD 網站縮放

關鍵原碼

用於 google-map

<style>
    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>

<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

也可用於嵌入(embed) YouTube video

_LAB001.razor

@page "/LAB001"
@attribute [Page("LAB001", "播放 YouTube 影片")]
@attribute [AllowAnonymous]

<PageTitle>播放 YouTube 影片</PageTitle>

<MudContainer>
  <MudText Typo=Typo.h3>LAB001 播放影片</MudText>
  <YouTubePlayer Src="https://www.youtube-nocookie.com/embed/agIJTnpfFGA" />
</MudContainer>

@code {

}

YouTubePlayer.razor

<div class="iframe-rwd-container">
  <iframe width="560" height="315"
          src="@Src"
          title="YouTube video player"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen>
  </iframe>
</div>

@code {
  [Parameter] public String Src { get; set; }
}

YouTubePlayer.razor.css

.iframe-rwd-container {
  position: relative;
  /* padding-bottom: 56.25%; *//* Thisis the aspect ratio,16:9 */
  /* padding-bottom: 75%; *//* Thisis the aspect ratio,4:3 */
  height: 56vh; /* 指定營幕高度56百分比。※若同時設定 padding-bottom 時會無效。 */
  overflow: hidden;
}

  .iframe-rwd-container > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

沒圖沒真象