我有一个嵌入式视频,只要它在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的情况下,如何停止播放视频或悬停视频?