How to hide iframe when entering site

Question

How to hide iframe when entering site

Navigation

#1 by (5 votes)
#2 by (1 votes)

2

Personal I have 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 ready to be watched, but does it have some code or some modification that I can make so that the person only sees the video when they click on mostrar ?

javascript html

asked by anonymous 26.12.2014 / 13:42

2 answers

How to save space in audit log? How to get the host name in URLs?

score 5 · Answer 1

Joins style="display: none;" in iFrame HTML. So the iFrame appears hidden.

But even though it is hidden, it will start ringing 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 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';
        });
    });

In this way the iFrame does not start ringing and stops / resumes every time it closes / opens. There is also an API for this, but this is the simplest solution if you want only the functionality you described in the question.

Example: link

score 1 · Answer 2

Give 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 <seletor desejado> is an id or a class that you assign to the iframe, or even the iframe, but this causes the behavior to apply to all iframes that css is applied to. >