How to hide iframe when entering the site

Question

Guys I’m with a code

<div class="box">
    <button id="showr">Mostrar</button>
    <button id="hidr">Esconder</button>
    <div>
        <iframe width="420" height="345" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1" frameborder="0" allowfullscreen></iframe>
    </div>
    <script>
        $("#showr").click(function() {
            $("iframe").first().show("fast", function showNext() {
                $(this).next("iframe").show("fast", showNext);
            });
        });

        $("#hidr").click(function() {
            $("iframe").hide(1000);
        });
    </script>

I wanted to know the following: when I enter the site, the video is already ready to be watched, but there is some code or some modification that I can do so that the person only sees the video when they click on mostrar?

Answer 1

Knuckle style="display: none;" in iframe HTML. So iframe is hidden.

However it although hidden will start playing if it does not change the URL/SRC.

So I suggest a change to:

<iframe style="display: none;" width="420" height="345" src="" data-url="http://www.youtube.com/embed/oHg5SJYRHA0" frameborder="0" allowfullscreen></iframe>

and the jQuery:

    $("#showr").click(function() {
        $("iframe").first().show("fast", function () {
            this.src = $(this).data('url') + '?autoplay=1';
        });
    });

    $("#hidr").click(function() {
        $("iframe").hide(1000, function () {
            this.src = $(this).data('url') + '?autoplay=0';
        });
    });

This way the iframe does not start playing and stops/restarts each time it closes/opens. There is also an API for this, but this is the simplest solution if you only want the functionality you described in the question.

Example: http://jsfiddle.net/mnL6vchg/

Answer 2

Assign the element the CSS below:

<seletor desejado> {
  visibility: hidden; //Uma opção, esse mantém o espaço do video na página
  display: none; //Outra opção, esse deixa a página como se o video não existisse nela 
                 //até que ele fique visível.
}

Where the <seletor desejado> be it an id or a class you assign to iframe, or even iframe, but this causes the behavior to apply to all iframes that the css is applied.