2

É possível iniciar um vídeo automaticamente quando abrir em um lightbox?

Quando é clicado, abre um um lightbox com o vídeo da VIMEO, só que quero que seja iniciado ao abrir o link e não quando clica no play.

Coloquei o iframe q a VIMEO disponibiliza e coloquei, mas não funciona. Tentei também no final do link a função ?autoplay=1 também não funciona.

1

2 Respostas 2

2

Nota: No momento (19/08/205) o player está gerando um erro de script quando você seleciona os videos de trailer (nos demais videos está normal), o erro é o seguinte:

Uncaught ReferenceError: NumberUtility is not defined - share2_combined.min.js?34123595:1

No momento de selecionar o video no embed você deve clicar em + Show options, como na imagem:

inserir a descrição da imagem aqui

Irá aparecer isto, nele selecione o autoplay:

inserir a descrição da imagem aqui

O código deve ficar assim:

<iframe src="https://player.vimeo.com/video/75187319?autoplay=1&title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

E a URL deve ficar assim https://player.vimeo.com/video/75187319?autoplay=1&title=0&byline=0&portrait=0

Nota: Recomendo que em html use &amp; ao invés de &, apesar do html5 aceitar normalmente o & sem o amp; você ainda pode ter uma série de problemas eventuais, como por exemplo se ouver um SVG na sua página ou algo referente com XML.

Note que se o autoplay não está ocorrendo pode ser uma questão de sandbox no seu lightbox que usa iframes.

Pra complementar a resposta do @balexandre, você deve usar a classe fancybox.iframe dentro do atributo class="", deve ficar assim:

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo</title>

    <!-- Adiciona biblioteca jQuery -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- Adiciona FancyBox -->
    <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
    <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
    <script>
    $(document).ready(function() {
        $(".fancybox-media").fancybox({
            maxWidth    : 800,
            maxHeight   : 600,
            fitToView   : false,
            width       : '70%',
            height      : '70%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none'
        });
    });
    </script>
</head>
<body>
    <a class="fancybox-media fancybox.iframe" href="https://player.vimeo.com/video/75187319?autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0">Play</a>
</body>
</html>

Usando Nivo-LightBox:

Deve ficar assim (requer a versão 1.2.0), baixe os arquivos de https://github.com/gilbitron/nivo-lightbox

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="nivo-lightbox.css" type="text/css" />
    <link rel="stylesheet" href="themes/default/default.css" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="nivo-lightbox.min.js"></script>
    <script>
    $(document).ready(function(){
        $('a').nivoLightbox();
    });
    </script>
</head>
<body>
    <a href="https://player.vimeo.com/video/75187319?autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0" data-lightbox-type="iframe">Carregar video</a>
</body>
</html>
2
  • A biblioteca que e uso é nivoLightbox. É possível adicionar?Obrigado pela ajuda Guilherme =D
    – mdesigner
    Commented 20/08/2015 às 11:24
  • @mdesigner editei a resposta :)
    – Syzoth
    Commented 20/08/2015 às 18:04
2

Nõ sei qual a livraria que está a usar para o Lightbox, mas com a fancyBox até tem um exemplo com Vimeo e o video comeca logo.

Código ao vivo: http://jsbin.com/qepeme/1/edit?html,js,output

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
    <!-- Add jQuery library -->
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

  <!-- Add mousewheel plugin (this is optional) -->
  <script type="text/javascript" src="http://fancyapps.com/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

  <!-- Add fancyBox -->
  <link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
  <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

  <!-- Optionally add helpers - button, thumbnail and/or media -->
  <link rel="stylesheet" href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
  <script type="text/javascript" src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
  <script type="text/javascript" src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
</head>
<body>

  <ul>
    <li><a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Youtube</a></li>    
    <li><a class="fancybox-media" href="http://vimeo.com/36031564">Vimeo</a></li>
  </ul>

</body>
</html>

Javascript:

$(document).ready(function() {
  $('.fancybox-media').fancybox({
    openEffect  : 'none',
    closeEffect : 'none',
    helpers : {
      media : {}
    }
  });
});
1

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 .