phantom phantom - 7 months ago 25
Javascript Question

display:none not working on iPhone simulator

I am currently working on embedding a youtube video into a website.

I have created my own custom play and pause buttons, of which one is shown at a given time. If video is playing the pause button is shown, and if the video is paused the play button is shown.

It is working as it should for desktop, however, when testing on the iOS simulator both buttons are showing and

display:none
does not appear to work.

Has anyone seen this before? What is the solution? It seems like very strange behavior. Also, when I test in chrome and check what it looks like on the iPhone it works as expected, however the simulator shows different behaviour.

Please see my code below. Oddly enough, the same error is shown in the code below, when you run the code snippet, however, as mentioned earlier when I test on chrome it works perfectly.



<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

<use> tags render what they point to, they aren't supposed to render their children.

The href (SVG2) or (xlink:href (SVG 1.1) attribute of a <use> tag should point to your paths via the id of the path.

In your case you could probably remove the tags altogether and just have paths which you could show or hide.

Comments