在网页中嵌入视频时,为了保证播放器的显示效果,我们通常会使用 iframe 元素来引用播放器。而且我们希望播放器的宽高比为16:9,以适配各种不同的屏幕分辨率。当容器的宽度发生变化时,播放器的宽高比就会自动适应为16:9的比例。该代码还允许用户在播放器中全屏观看视频,提升用户体验。
示例代码
<!-- padding-top calculation is height / width (assuming 16:9 aspect ratio) --> <div style="position: relative; padding-top: 56.25%"> <iframe src="https://test.com/iframe" style="border: none; position: absolute; top: 0; height: 100%; width: 100%" allowfullscreen="true" ></iframe> </div>