如何将 YouTube 视频嵌入到指定容器中？答案

【问题标题】：How to get YouTube video embedded inside a specified container?如何将 YouTube 视频嵌入到指定容器中？
【发布时间】：2018-04-03 20:03:58
【问题描述】：

应用：Ionic - Cordova - Angular

HTML 块如下：

<div style='width:100%;height:320px'>
    <iframe src="***" style='width:100%;'></iframe>
</div>

上面的代码在 div 块中加载了一个 YouTube 视频。

要求：

a) 纵向 - 视频尺寸应为 100% * 320px ------ > 工作正常。

b) 横向 - 视频大小应为 100% * 100% --------> 行为不一致

分析：

情况 (b) 并非在所有情况下都有效。

屏幕处于横向模式，但视频不可见，它正在后台播放。我们可以听到声音。

在 chrome 中检查 - 看到嵌入的 YouTube 视频在横向模式下的高度和宽度设置为 100%，但视频仍然不可见。

【问题讨论】：

【解决方案1】：

我看到您已将高度用作 320 像素，因此在横向模式下，高度也占用 320 像素，这导致了不一致。

尝试将高度设为 100%

<div style='width:100%;height:100%'>
    <iframe src="***" style='width:100%;'></iframe>
</div>

或根据高度空间。

【讨论】：