html - YouTube Splashscreen无法正常工作

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

尝试将style =“width:266px”添加到第一个div(onclick一个)。默认情况下，它占用窗口的100％宽度，因此单击空白实际上是使用onclick事件单击该div :)

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