Html 停止视频大小调整

我有一个嵌入式视频，在youtube上播放时，以及在Vimeo中悬停时，它会立即调整大小。在玩之前看起来是这样的：

玩完之后，我就这样说：

以下是相关代码：

            <div id="film-svg">
                    <svg id="_35mm_original" data-name="35mm_original" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.73 301.31">
                        <defs>
                            <style>
                            .cls-1 {
                                fill: #fafafa;
                            }

                            .cls-1,
                            .cls-2,
                            .cls-3 {
                                stroke: #282d32;
                                stroke-miterlimit: 10;
                            }

                            .cls-2 {
                                fill: #e3e7ea;
                            }

                            .cls-3 {
                                fill: #282d32;
                            }

                            .cls-4 {
                                fill: #fff;
                            }

                            .cls-5,
                            .cls-6 {
                                font-size: 12px;
                                font-family: Roboto;
                                font-weight: 700;
                            }

                            .cls-5,
                            .cls-7 {
                                fill: #586075;
                            }

                            .cls-6 {
                                fill: #afb0b5;
                            }

                            .cls-8 {
                                fill: none;
                                stroke: #fff;
                                stroke-linecap: round;
                                stroke-linejoin: round;
                            }
                            </style>
                        </defs>
                        <title>film_strips</title>
                        <g id="base">
                            <rect class="cls-1" x="18.71" y="0.5" width="133" height="100"></rect>
                            <rect class="cls-2" x="18.71" y="100.5" width="133" height="100"></rect>
                            <rect class="cls-1" x="18.71" y="200.5" width="133" height="100"></rect>
                            <rect class="cls-3" x="0.5" y="0.58" width="17.73" height="300.22"></rect>
                            <rect class="cls-4" x="6.5" y="6.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="6.5" y="17.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="6.5" y="28.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="6.5" y="39.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="6.5" y="50.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="6.5" y="61.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="6.5" y="72.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="6.5" y="82.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="6.5" y="93.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="6.5" y="104.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="6.5" y="115.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="6.5" y="126.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="6.5" y="137.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="6.5" y="148.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="6.5" y="159.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="6.5" y="169.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="6.5" y="180.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="6.5" y="191.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="6.5" y="202.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="6.5" y="213.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="6.5" y="224.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="6.5" y="235.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="6.5" y="246.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="6.5" y="257.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="6.5" y="267.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="6.5" y="278.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="6.5" y="289.5" width="6" height="6"></rect>
                            <rect class="cls-3" x="152.5" y="0.58" width="17.73" height="300.22"></rect>
                            <rect class="cls-4" x="158.5" y="6.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="158.5" y="17.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="158.5" y="28.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="158.5" y="39.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="158.5" y="50.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="158.5" y="61.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="158.5" y="72.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="158.5" y="82.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="158.5" y="93.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="158.5" y="104.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="158.5" y="115.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="158.5" y="126.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="158.5" y="137.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="158.5" y="148.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="158.5" y="159.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="158.5" y="169.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="158.5" y="180.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="158.5" y="191.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="158.5" y="202.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="158.5" y="213.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="158.5" y="224.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="158.5" y="235.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="158.5" y="246.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="158.5" y="257.5" width="6" height="5"></rect>
                            <rect class="cls-4" x="158.5" y="267.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="158.5" y="278.5" width="6" height="6"></rect>
                            <rect class="cls-4" x="158.5" y="289.5" width="6" height="6"></rect>
                            <foreignObject width="133" height="100" x="18.71" y="0.5">
                                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/YCoQwZ9BQ9Q" frameborder="0" allowfullscreen></iframe>
                            </foreignObject>
                        </g>
                    </svg>
</div>

.cls-1{
填充：#fafafa；
}
.cls-1，
.cls-2，
.cls-3{
行程：282d32；
行程限制：10；
}
.cls-2{
填充：#e3e7ea；
}
.cls-3{
填充：#282d32；
}
.cls-4{
填充：#fff；
}
.cls-5，
.cls-6{
字体大小：12px；
字体系列：Roboto；
字号：700；
}
.cls-5，
.cls-7{
填充：#586075；
}
.cls-6{
填充：#afb0b5；
}
.cls-8{
填充：无；
冲程：#fff；
笔划线头：圆形；
笔划线条连接：圆形；
}
胶卷

包装svg的div似乎需要设置

宽度

，以便视频可以单击，因此其属性从CSS设置为

宽度：350px

在Vimeo的情况下，如何阻止视频在播放或悬停时调整大小？
您的
iframe
具有
宽度
和
高度
，两者都固定在
100%
。您可以尝试将这些值更改为像素而不是百分比。将其设置为
100%
只会将播放机扩展到可扩展的最大大小（即320x240等）。您可以随时尝试
width=“320”height=“240”
，看看是否让播放器重新调整到该大小，然后根据
视图框的大小进行调整。让我知道这是否解决了问题！（我所说的“从那里进行调整”是指使用更大的帧大小，即大于320x240的帧）。@DrewFarber我认为这可能与iframe大小有关。问题似乎是，在播放视频时，高宽比被强制施加在视频上，因此即使我猜到正确的宽度，高度也会被忽略。更不用说，如果iFrame大小发生更改，占位符图像就会错位，并且不再像第一张图片（播放按钮向下和向右移动，部分不在视图中-播放时视频仍会调整大小）。检查时，iFrame的位置正确，并按预期填充了正方形-它只是调整大小的实际视频。您是否尝试过使用它，并将固定的HTML5视频大小设置为这样<代码>
。我知道这似乎太明显了，但它总是值得一试。@DrewFarber好主意，但使用youtube这样的url似乎不行……Grrr。。。YouTube真让人痛苦。我唯一想做的另一件事是在iframe的CSS中设置一个固定的
宽度
和
最大宽度
，以及一个固定的
高度
和
最大高度
，以及视频本身，看看这是否有什么作用。另外，如果你最终找到了解决方案，就把它贴在这里，因为我仍然很好奇！