Alternatives to jQuery hide()/show()?

Question

I am trying to hide an element in my page (it is a YouTube player instance). When I use jQuery's hide() method, the player gets a bit wonky, in that it stops responding, even after I call .show() again.

Is there another variant on hide(), maybe something like .opacity(0), or .visibility('none') that I can use? I don't mind the player taking up space on the page, I just want to hide it so the user can't interact with it until I'm prepared to show a video (the player happens to require a video to load immediately, but I don't have one until the user selects one from another UI element!)

Answer 1

You could set the element's CSS display property to none, but this is essentially the same as what $.hide() is doing.

Instead of hiding the element containing the video player, consider masking it. Don't modify the visibility of the player element but instead render another element on top and adjust that element's visibility.