看焰火罗~ Vaadin 内嵌 iFrame 不跑版自动缩放 - day25

看焰火罗~ 有时我们看网页内嵌YouTube影片时，真的会气到头顶冒烟，画面被切掉不说，还无法自动缩放。今天适逢国庆佳节，我们就来放焰火吧~

iFrame

@CssImport("frontend://styles.css") import css styles.css

此画面内有两支YouTube影片，以iframe内嵌。

@Route("youtube", layout = MainLayout::class)
@AllowAll
@CssImport("frontend://styles.css")
class YouTubePlayerView : KComposite() {
    private val root = ui {
        verticalLayout {
            setSizeFull()
            div {
                className = "iframeBox"
                iframe("https://www.youtube.com/embed/BrWrmtl2oGU") {
                    className = "iframe"
                }
            }
            div {
                className = "iframeBox"
                iframe("https://www.youtube.com/embed/thiyXIuwnfo") {
                    className = "iframe"
                }
            }
        }
    }
}

CSS

外层div 设定全宽，高则按 16:9 比例调整。内层iframe 则完整覆盖外层

.iframeBox{
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  position: relative;
}

.iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}