Question

我有一个嵌入式视频，只要它在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>

包装svg的div似乎需要设置width以便视频可点击，因此其属性从CSS设置为width: 350px;。

如果在Vimeo的情况下，如何停止播放视频或悬停视频？

停止视频大小调整

0 个答案: