ディスプレイ：iPhoneシミュレータで動作していないものはありません

Question

私は現在、YouTubeビデオをウェブサイトに埋め込むよう取り組んでいます。

私は独自のカスタム再生ボタンと一時停止ボタンを作成しましたが、そのうちの1つは特定の時間に表示されます。ビデオが再生されている場合は一時停止ボタンが表示され、ビデオが一時停止している場合は再生ボタンが表示されます。

デスクトップの場合と同じように動作しますが、iOSシミュレータでのテストでは両方のボタンが表示され、display:noneは動作していません。

誰もこれまで見たことがありますか？解決策は何ですか？それは非常に奇妙な行動のようです。また、私はクロムでテストし、iPhone上でそれが期待どおりに動作するように見えるかを確認しますが、シミュレータは異なる動作を示します。

以下のコードをご覧ください。奇妙なことに、以下のコードでも同じエラーが表示されます。ただし、コードスニペットを実行すると、クロムでテストするときに前述したように完全に機能します。

<style> 
 
    
 
#pause-button { 
 
    display: none; 
 
} 
 

 
</style> 
 

 
<script type="text/javascript"> 
 
    // global variable for the player 
 
    var player; 
 
    // this function gets called when API is ready to use 
 
    function onYouTubePlayerAPIReady() { 
 
    // create the global player from the video iframe 
 
    player = new YT.Player('video', { 
 
     events: { 
 
     // call this function when player is ready to use 
 
     'onReady': onPlayerReady, 
 
     // call this function when player changes state i.e. when video ends 
 
     'onStateChange': onPlayerStateChange 
 
     } 
 
    }); 
 
    } 
 

 
    function onPlayerReady(event) { 
 
    var playButton = document.getElementById("play-button"); 
 
    playButton.addEventListener("click", function() { 
 
     player.playVideo(); 
 
     playButton.style.display = "none"; 
 
     pauseButton.style.display = "block"; 
 
    }); 
 

 
    var pauseButton = document.getElementById("pause-button"); 
 
    pauseButton.addEventListener("click", function() { 
 
     player.pauseVideo(); 
 
     playButton.style.display = "block"; 
 
     pauseButton.style.display = "none"; 
 
    }); 
 
    } 
 

 
    function onPlayerStateChange(event) { 
 
    //replay when video ends  
 
    if (event.data === 0) { 
 
     player.playVideo(); 
 
    } 
 
    } 
 

 
    // Inject YouTube API script 
 
    var tag = document.createElement('script'); 
 
    tag.src = "https://www.youtube.com/player_api"; 
 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
 
</script> 
 

 
<!-- Make sure ?enablejsapi=1 is on URL --> 
 
<!-- &controls=0 hides controls --> 
 
<!-- &showinfo=0 hides information --> 
 
<!-- &rel=0 prevents related video been shown at the end --> 
 
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/YXsGr21GD0M?enablejsapi=1&html5=1&controls=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe> 
 

 
<div class="buttons"> 
 
    <!-- if we needed to change height/width we could use viewBox here --> 
 
    <svg class="button" id="play-button"> 
 
    <use xlink:href="#play-icon"> 
 
     <path id="pause-icon" data-state="playing" d="M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26" /> 
 
     </use> 
 
    </svg> 
 
    <svg class="button" id="pause-button"> 
 
    <use xlink:href="#pause-icon"> 
 
     <path id="play-icon" data-state="paused" d="M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28" /> 
 
     </use> 
 
    </svg> 
 
</div>

Answer 1

<use>タグは、彼らが何を指してレンダリングし、彼らは自分の子供をレンダリングすることになっていません。

HREF（SVG2）または（のxlink：<use>タグのhref（SVG 1.1）属性は、パスのIDを経由して、あなたのパスを指している必要がありますあなたの場合は

あなたはおそらく完全にタグを削除できます。