Skip to main content
replaced http://pt.stackoverflow.com/ with https://pt.stackoverflow.com/
Fonte Link

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

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

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

adicionou 1 caractere ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
<!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=0autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0" data-lightbox-type="iframe">Carregar video</a>
</body>
</html>
<!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>
<!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>
adicionou 271 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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.

<!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&title=0&byline=0&portrait=0">Play<autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0">Play</a>
</body>
</html>
<!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&title=0&byline=0&portrait=0autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0 data-lightbox-type="iframe">Carregar video</a>
</body>
</html>

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

<!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&title=0&byline=0&portrait=0">Play</a>
</body>
</html>
<!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&title=0&byline=0&portrait=0 data-lightbox-type="iframe">Carregar video</a>
</body>
</html>

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.

<!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>
<!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>
adicionou 861 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
adicionou 382 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando