响应式视频元素无法在移动设备上运行

Question

好的，所以我想在我的网站上播放嵌入的YouTube视频。当我更改视口大小时，它在桌面上正常工作并重新调整大小，但在移动设备（iPhone 4和6以及运行Android的HTC）上，视频无法正常调整大小。

iframe包含在div中，代码如下：

<div class="videocontainer"><iframe.......></iframe></div>

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 30px;
    height: 0;
    overflow:hidden;
}

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

我也试过没有运气的媒体查询，用它来测试：

@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait) {.videorecipe {width: 10%;} 
}

我意识到10％是小的，我加上它只是为了测试。

你可以在这里看到这个页面： http://lowfodmapdiet.tv/recipe/chicken-and-vegetables-gluten-free-pie