Question

我的代码：https://jsfiddle.net/qe5kcps2/`

<div onclick="myDiv=document.getElementById('myDiv'); myDiv.style.display='block';
    this.style.display='none'">
    <a style="display:inline-block;background-color:#097065; width: 266px; height: 266px;
        cursor: pointer; border-radius:50px; border: 5px solid #BF598E;">
    </a>
</div>

<div id="myDiv" style="display: none;">
    <iframe width="266" height="266" src="https://www.youtube.com/embed/?rel=0;disablekb=1&amp;vq=medium&amp;showinfo=0&amp;autohide=1&amp;autoplay=1&amp;iv_load_policy=3&amp;fs=0'"
        style="background-color:#000000; width: 266px; height: 266px; cursor: pointer;
        border-radius:50px; border: 5px solid #711B93;"frameborder="0" allowfullscreen>
    </iframe>
</div>

我的问题是，当你点击图像的右侧（白色空白区域）时，如何直接点击图像？是否有任何代码可以实现修复它，以便您必须单击图像才能打开它？

Answer 1

尝试添加样式=＆＃34;宽度：266px＆＃34;到第一个div（onclick一个）。默认情况下，它占据了窗口宽度的100％，因此点击你实际上点击了那个div的空白区域的onclick事件：）

<div style="width:266px" onclick="myDiv=document.getElementById('myDiv'); myDiv.style.display='block';
    this.style.display='none'">
    <a style="display:inline-block;background-color:#097065; width: 266px; height: 266px;
        cursor: pointer; border-radius:50px; border: 5px solid #BF598E;">
    </a>
</div>

<div id="myDiv" style="display: none;">
    <iframe width="266" height="266" src="https://www.youtube.com/embed/?rel=0;disablekb=1&amp;vq=medium&amp;showinfo=0&amp;autohide=1&amp;autoplay=1&amp;iv_load_policy=3&amp;fs=0'"
        style="background-color:#000000; width: 266px; height: 266px; cursor: pointer;
        border-radius:50px; border: 5px solid #711B93;"frameborder="0" allowfullscreen>
    </iframe>
</div>

YouTube Splashscreen无法正常使用

1 个答案: