Javascript 在图像后面对齐视频

我正在尝试将视频与图像对齐，使其看起来像是在电视机上更换频道。现在视频很小，我无法调整视频的大小。有没有更好的办法

<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>

---

您可以通过

left

和

top

属性来完成，就像您在小提琴中所做的那样，但是您必须在像素数之后添加

px

，例如：

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

---

希望这有帮助。

您的div呈现正确，但我无法看到视频，因为存在跨源问题（混合内容：页面通过HTTPS加载，但请求了不安全的资源“”。此请求已被阻止；内容必须通过HTTPS提供）：

演示：

---

如果你想让你的页面看起来像电视，那么创建一个3x3表格，并将电视盒图像分成8块。将这些片段对齐，重新创建一台电视，并用视频填充中柱。有关示例，请转到以下链接：

---

有了GrafiCode Studio的响应，您将无法按下播放按钮。

我决定用它来播放，并将视频放在图像后面。我不确定这会有多大的反应，但它看起来会起作用

<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>

---

是的，我注意到我没有在小提琴中这样做，但我在问题中更新了它。我更新了小提琴，删除了左上角的风格。还是没有什么帮助，因为视频显示的很小。我更新了小提琴，在youtube视频上有https，只是在发布问题之前忘了点击更新按钮。这个问题有正确的https。很好的建议。我将尝试这样做。

<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>