-1

我有一个图像，中间有一个电视屏幕。选择图像作为背景后，我想在屏幕中间放置一个 YouTube 视频。当前的代码使它成为可能，但它不能在不同的浏览器上正常工作。请指导。谢谢

<div style="
position:relative;
   width:100%;
   height:100%;
  background: url(img/backround2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

">
<iframe style="position:absolute; margin-top:12.7%;margin-left:31%; width:41.1%; height:43%;" src="http://player.vimeo.com/video/VIDEO_ID?portrait=0&color=333"  frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

在此处输入图像描述

4

1 回答 1

2

使用 Paint，找出背景图像中从背景图像顶部到电视顶部的像素数。这是您的 topDistance。

再次使用Paint，找到背景图像中从背景图像左侧到电视左侧的像素数。这是您的左侧距离。

现在，将这些 CSS 规则应用于视频容器<div>：

position: absolute;
top: (topDistance)px; /* replace (topDistance) with the distance you found earlier*/
left: (leftDistance)px; /* replace (leftDistance) with the distance you found earlier */

样本：

div.video {
    position: absolute;
    top: 100px;
    left: 50px;
}

视频放置在距离浏览器顶部 100 像素和距离浏览器左侧 50 像素的位置。确保在这种情况下使用像素，因为不同的浏览器会以不同的方式解释 % 距离，具体取决于您的 parentdiv和窗口大小。

div获取包含背景图像的父级并应用position: relative;规则。虽然position: relative;保持div的行为相同，但它允许您将视频与div. 考虑您对 s 的高度/宽度div和背景大小的选项：浏览器对这些标签的 %/cover 的解释分别取决于其父divs 和窗口大小。有时浏览器会使用 %/cover 和继承做意想不到的事情。

在这里拉小提琴。

于 2013-06-10T20:32:08.193 回答