YouTubeのスプラッシュスクリーン正常に動作していない

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

最初のdiv（onclick one）にstyle = "width：266px"を追加してみてください。デフォルトそれはあなたが実際のonclickイベントでそのdiv要素をクリックしている空白をクリックするので、ウィンドウの幅の100％を占めています:)

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