2

Pessoal eu estou com um código

<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>

Queria saber o seguinte: quando eu entro no site, o video já fica pronto para ser assistido, mas tem algum código ou alguma modificação que eu posso fazer para que a pessoa só veja o vídeo quando ela clicar em mostrar?

1

2 Respostas 2

5

Junta style="display: none;" no HTML da iFrame. Assim a iFrame aparece escondida.

Porem ela apesar de escondida vai começar a tocar se não alterar o URL/SRC.

Assim sugiro uma mudança para:

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

e o 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';
        });
    });

Desta maneira o iFrame não começa a tocar e pára/recomeça cada vez que fechar/abrir. Existe também uma API para isto, mas esta é a solução mais simples se quiser somente a funcionalidade que descreveu na pergunta.

Exemplo: http://jsfiddle.net/mnL6vchg/

3
1

Atribua ao elemento o CSS abaixo:

<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.
}

Onde o <seletor desejado> seja um id ou uma classe que você atribui ao iframe, ou até mesmo o iframe, mas isso faz com que o comportamento se aplique a todos os iframes que o css for aplicado.

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .