Galeria de videos no meu site (ajuda e opinião)

[saulocalesso 0]

Fala galera trabalho com filmagem de eventos no interior de SP e resolvi eu mesmo criar um site para minha empresa. Não tenho experiência nisso mas peguei um template e fui modificando, inserindo outros templates no meu site e o resultado é o seguinte:

http://www.nkfilms.com.br

 

O site é novo, tem 1 semana no ar e estou tentando arrumar e deixar o melhor possível com o tempo.

Minha dúvida é a seguinte:

1 - Na parte de vídeos(portifólio) fiz um esqueminha legal de separar os vídeos por tags, por enquanto ainda tem poucos, mas logo logo vai ter bastante então fica legal pro cliente separar aqueles que mais lhe interessa para assistir. Só que pra ficar bem organizado tive que deixar as telinhas pequenas assim e um cliente reportou que achou ruim ter que clicar em tela cheia pra aumentar o tamanho (o que pensei bem e concordei). Queria que o vídeo aumentasse de tamanho ao clicar no play, é possível isso? Não precisa ser tela cheia, só aumentar bem pra ficar mais fácil a visualização, tipo quando aperta Theater mode no próprio youtube.

2 - Andei dando uma olhada aqui no fórum e vi esses exemplos:

http://fancybox.net/

http://dimsemenov.com/plugins/magnific-popup/

 

Será que fica melhor eu colocar uma "thumbnail" do vídeo em foto e quando clica ele abre pro vídeo? É possível fazer isso? Pois no exemplo ta de foto pequana pra foto maior.

 

Desculpa mandar uma dúvida tão grande, é que tentei deixar o mais explicado possível.

Se tiver alguma opinião para o site, ou mesmo para essa galeria de vídeos estou aberto a sugestões.

OBS: sou bem iniciante em html.

[pwd 7]

No seu caso vc quer é contratar um profissional :P

[saulocalesso 0]

hahahahaha quero só uma dica pra melhorar essa parte do site.

Uma dúvida se da pra fazer o que eu perguntei. Dá ?

[L. Henrique 179]

Saulo,

Sim, dá. Você só precisa inserir o video dentro do modal que ele vai abrir e o thumbnail vai ser o link.

Abraços!

[Don Benatti 28]

Você precisa da imagem do vídeo.

http://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg

Em seguida colocá-la em um elemento que ao ser clicado abrirá o vídeo em outro elemento fixo na tela e já iniciando, para isso utilizamos o parâmetro "?autoplay=1".

 

Veja um exemplo de elemento fixo bem simples, ele exibiria o vídeo no rodapé, para colocá-lo no centro da tela, pode ser feito com JavaScript.

/* Um elemento oculto com a class "video-viewer" */

<style>
.video-viewer{
    position:fixed; 
    z-index:987949; 
    bottom:1px; 
    left:55px; 
    width:560px; 
    height:315px; 
    padding:5px; 
    border:1px solid #999;
    display:none;
}
</style>

No lugar do vídeo, você colocaria a imagem

<!-- Elemento com a classe "open-video" e a imagem dentro -->

<li data-id="id-3" data-type="casamentos">
    <a href="#" class="open-video" data-vid="EDz2jZHrZdU">
        <img src="http://img.youtube.com/vi/EDz2jZHrZdU/hqdefault.jpg">
    </a>
</li>

Depois configure para abrir quando clicar

// jQuery

$(document).ready(function() {
    $(".open-video").on("click", function(e) {
        e.preventDefault();
        
        var video_viewer = $('.video-viewer');
        
        if (!video_viewer.length) {
            video_viewer = $(document.createElement("div"));
            video_viewer.attr("class", "video-viewer");
        }
        
        var id = $(this).data("vid");
        
        video_viewer.html('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+ id +'?autoplay=1" frameborder="0" allowfullscreen=""></iframe>');
        
        video_viewer.show();
    });
});

Depois de estudar este exemplo, crie também um botão de fechar, o código dele deverá ser algo como:

$('.video-viewer').html("").hide();

[saulocalesso 0]

Não consegui com o código que me passou.
Da uma olhada nisso aqui.

http://codepen.io/sufiaum/pen/reoZrM

 

Parece que deu certo. Como sera que eu posso aumentar o jeito da tela aparecer? Pra deixar maior ou menos?

 

Exportei e abri no browser e o vídeo não abre. O que será que fiz de errado?

[pwd 7]

oO cara fez o código pra vc, e ainda foi procurar outro? =(

[saulocalesso 0]

Não deu certo o dele em si haha. E esse dai que eu postei foi eu que fiz na base do dele e de outros.