如何在时尚的登录模态框中显示视频？

支持
1

@meghna 感谢这个组件！
在桌面上运行正常，但在 iPhone XR（至少）的移动设备（Chrome、Edge 浏览器）上，视频（YouTube 频道）不显示。
有什么办法可以解决这个问题吗？
谢谢！
附注：截图上登录按钮上方的空白区域应该是视频的位置……

IMG_2966.PNG
IMG_2966.PNG828×1792 117 KB

1 个赞
2

通过嵌入 YouTube 视频并稍作修改 HTML 来解决。
添加 CSS 有助于在移动设备上显示视频。

2 个赞
3

你能在这里分享你的技巧吗？

2 个赞
4

@tobiaseigen 好的！
在我这里，组件内的 HTML（请注意 YouTube 链接中的“EMBED”）：

<p>Exclusively join the StarCohort, walking UA`s EuroTiger Path, in global 🌍 sync. Scale next.</p> 
<p class="center-aligned-element">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/QKLAKLp7bDw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>

CSS（在我这里粘贴到组件内）：

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    padding-top: 30px; /* Some padding at the top to avoid content overlay */
    height: 0;
    overflow: hidden;
}

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

希望这对大家有帮助）

3 个赞