我有以下图像:
现在,我想在此图像上放置一个具有响应式视图的 Vimeo 视频:
为此,我正在使用以下 CSS 和 HTML 代码:
HTML 代码:
<div class="vimeo">
<article>
<figure>
<iframe src="https://player.vimeo.com/video/211148482?autoplay=1&title=0&byline=0&portrait=0" width="568" height="453" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</figure>
</article>
</div>
CSS代码:
.vimeo {
font: 16px/1.4 Georgia, Serif;
width: 45%;
margin: 1px auto;
background: url(images/bg.jpg);
background-size: contain;
background-repeat: no-repeat;
position: relative;
}
pre, article style, article script {
white-space: pre;
display: block;
overflow-x: auto;
}
img {
max-width: 100%;
}
figure {
display: block;
}
figcaption {
display: block; text-align: center; orphans: 2;
}
现在它看起来是这个图像:
![enter image description here](https://istack.dev59.com/0PnBf.webp)