Clicar em uma imagem e abrir um vídeo do Youtube fullscreen


(Clayton Romero) #1

Tudo certo amigos?

Seguinte, sou designer e tenho um leve conhecimento de HTML, trabalhei com isso em meados de 2007. Obviamente muita coisa mudou desde lá e eu não acompanhei.

Aí soltaram uma bomba pra mim aqui no trampo, montei um layout e como não tinha ninguém pra fazer o Front-End caiu no meu colo.

Minha situação é; eu queria rodar um vídeo da mesma maneira que acontece nesse site: https://www.allbirds.com (a parte que falo é onde tem uma imagem de um cara num campo)

Testei várias coisas, vi que precisa de JS mas até agora não consegui fazer funcionar dessa maneira. Alguém poderia me ajudar nessa? Ainda não consegui entender toda a nova maneira de rodar vídeos no html.

Valeu!


(Luã Ciceri Schwertner) #2

Fala @gzas666, como tu disse que é designer acho mais fácil utilizar um plugin pra te auxiliar nisso do que fazer o js na mão. Tem um bem legal que é o VenoBox, ele é bem fácil de usar e acredito que pela documentação do próprio site tu consiga fazer o que queres.


(Clayton Romero) #3

Valeu @lciceris!

Ainda tô apanhando pra fazer carregar o vídeo do youtube, mas tenho fé que vou conseguir haha. Todo o resto funcionou, só com vídeo que fica aparecendo uma janela em branco e não carrega nada.

Mas valeu pela resposta rápida e por indicar esse plugin animal!


(Luã Ciceri Schwertner) #4

@gzas666 qualquer coisa posta teu código ou link do projeto aqui que podemos ver o que ta rolando e tentar resolver o problema.


(Clayton Romero) #5

(respostas abandonadas pelo autor, serão removidas automaticamente em 24 horas a exceto se forem sinalizadas)


(Clayton Romero) #6

Bom, vamos lá.

Vou colocar aqui só um simples para teste que eu fiz seguindo as instruções deles. Só pra ver se estou errando em algum raciocínio.

<head>
    <title>Teste</title>

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

    <!-- Add venobox -->
    <link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="venobox/venobox.min.js"></script>
    
    <script type="text/javascript" src="js/main.js"></script>
</head>

<body>
    <a class="venobox" data-type="youtube" href="https://www.youtube.com/watch?v=vPbItj9FSP4">Link YouTube</a>
</body>

</html>

No "main.js" eu coloquei o seguinte (também seguindo as instruções deles):

$(document).ready(function(){

    /* default settings */
    $('.venobox').venobox(); 


    /* custom settings */
    $('.venobox_custom').venobox({
        framewidth: '400px',        // default: ''
        frameheight: '300px',       // default: ''
        border: '10px',             // default: '0'
        bgcolor: '#5dff5e',         // default: '#fff'
        titleattr: 'data-title',    // default: 'title'
        numeratio: true,            // default: false
        infinigall: true            // default: false
    });

    /* auto-open #firstlink on page load */
    $("#firstlink").venobox().trigger('click');
});

Para carregar uma imagem ou abrir um iFrame que puxa um site por exemplo, funcionou perfeitamente. Só pra carregar o vídeo do YouTube que dá problema, só aparece o quadrado vazio. Valeu a ajuda @lciceris !


(Robson Vital) #7

Boa tarde @gzas666 fiz um exemplo aqui so alterei as galerias de jquery e venoBox e usei outro player para o vídeo

E abriu normal o play

tenta colocar o link do youtube ai, aqui onde estou é bloqueado.


(Clayton Romero) #8

@tiobobs valeu!

Funcionou tudo certo aqui. No fim percebi que eu estava fazendo burrada mesmo haha. Valeu a ajuda de todos!!