Question

我正在尝试将视频对齐在图像后面，这样看起来你正在改变电视机上的频道。现在视频很小，我无法调整视频的大小。有任何想法或更好的方法来解决这个问题吗？

<div class="col-md-offset-1 col-md-5" style="position:relative;">
   <div style="position:absolute;">
       <iframe allowfullscreen="" src="https://www.youtube.com/embed/oNBBijn4JuY?showinfo=0&amp;wmode=opaque" frameborder="0"></iframe>
    </div>
    <div style="max-width:100%;max-height:100%;margin:auto;position:relative;">
        <img src="https://dl.dropboxusercontent.com/s/cqyrqtx4i7zwt0w/tvset_small_cropped.png" />
    </div>
</div>

https://jsfiddle.net/e2syv64u/

Answer 1

您可以left和top属性执行此操作，就像您在小提琴中一样，但您必须在像素数之后添加px，例如：

<div style="position:absolute;top:10px;left:100px;">

希望这有帮助。

Answer 2

如果您想使您的页面看起来像电视，那么创建一个3x3表格并将您的电视盒图像分成8个部分。将这些部分对齐以重新创建电视并使用视频填充中间列。请转到以下链接以获取示例：

http://www.webdevelopersnotes.com/tips/html/html_table_tutorial_rounded_corners.php3

使用GrafiCode Studio的回复，您将无法按下播放按钮。

Answer 3

您的div正确呈现，但我无法看到该视频，因为存在交叉来源问题（混合内容：该网页是通过HTTPS加载的，但请求了不安全的资源＆＃39; http://www.youtube.com/embed/oNBBijn4JuY?showinfo=0&wmode=opaque＆＃39;。此请求已被阻止;内容必须通过HTTPS提供。）：

DEMO：https://jsfiddle.net/e2syv64u/2/

adb shell

Answer 4

我决定玩这个，并让视频在图像后面。我不确定这会有多快，但看起来它会起作用。

<div class="col-md-offset-1 col-md-5" style="position:relative;" id="tv">
    <div style="top:95px;left:37px;position:absolute;" id="player">
        <iframe width="415" height="333" allowfullscreen="" src="https://www.youtube.com/embed/oNBBijn4JuY?showinfo=0&controls=0&wmode=opaque&origin=https://jsfiddle.net" frameborder="0"></iframe>
    </div>

    <div style="max-width:100%;max-height:100%;margin:auto;position:relative;pointer-events: none;">
        <svg width="592" height="522" pointer-events="none" ="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <image x="0" y="0" width="592" height="522" xlink:href="https://dl.dropboxusercontent.com/s/cqyrqtx4i7zwt0w/tvset_small_cropped.png" />
        </svg>
    </div>
</div>

https://jsfiddle.net/e2syv64u/12/

对齐视频背后的图像

4 个答案: