iframe 如何跟著 RWD 網站縮放
iframe, RWD, YouTube video player 好文章留存。
參考原文
關鍵原碼
用於 google-map
也可用於嵌入(embed) YouTube video
沒圖沒真象
Last updated
iframe, RWD, YouTube video player 好文章留存。
Last updated
<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>@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 {
}<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; }
}.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%;
}