Como adicionar uma imagem sobre um vídeo?

  • Thebigspire

    (@thebigspire)


    7 anos, 5 meses atrás

    Prezados,

    Estou desenvolvendo um site que terá vídeos de Youtube diretamente na página. Eu adiciono o vídeo à página através do código gerado pelo Youtube na aba Incorporar.

    Problema: quando adiciono o vídeo dessa forma, frequentemente a imagem do vídeo que o Youtube seleciona antes de o usuário dar play é muito feia.

    Descobri alguns sites onde o vídeo possui uma imagem em alta qualidade, escolhida a dedo pelo dono do site, a qual “cobre” completamente o conteúdo do Youtube (foto 1). Dessa forma, o conteúdo do youtube só é realmente mostrado quando o usuário aperta play (foto 2).

    foto 1: http://i.imgur.com/WmKdG9z.png
    foto 2: http://i.imgur.com/VQ5kZxK.png

    Saberiam me indicar algum plugin ou comando que possa fazer isso, por favor?

    Muito obrigado!

Visualizando 2 respostas - 1 até 2 (de um total de 2)
  • Moderador Mário Valney

    (@mariovalney)

    WordPress Cleric of Fire

    7 anos, 5 meses atrás

    Olá @thebigspire

    Há várias formas de fazer isso, mas basicamente é front-end.

    Então você vai precisar alterar o seu Tema (se for um tema pronto, sugiro então criar um Tema Filho).

    Você pode inserir um vídeo sobre uma imagem, mas com opacidade 0 e ao clicar troca para 1. Abaixo tem um exemplo muito simples, mas que pode te ajudar:
    https://jsfiddle.net/53snoez2/

    Detalhes:

    1 – Troque o SRC do iframe do YouTube por DATA-SRC (assim o iframe não será carregado).

    2 – A imagem que você quer deve ir como background-image da DIV video-with-cover.

    O que acontece:

    Temos uma DIV video-with-cover com um iframe dentro, mas sem SRC, então é inválido e nada carrega. Ao clicar na DIV (mais precisamente no BEFORE dela) o javascript recebe o valor de DATA-SRC e adiciona o AUTOPLAY, depois coloca como SRC do IFRAME e adiciona a classe ACTIVE à DIV.

    Dessa forma, após o clique o IFRAME será carregado, o vídeo inicia e trocamos a opacidade além do z-index para que o IFRAME fique sobre o BEFORE.

    —————

    Essas é a parte do front-end. Você pode criar um shortcode para adiantar o trabalho ou sempre adicionar esse HTML nos seus posts. Ou se cadastrar a o vídeo de outra forma, pode fazer via Tema… as possibilidades são várias e vai depender do seu nível de conhecimento e de vontade de codificar, porque infelizmente não conheço nenhum plugin que faça isso para você.

    Abraços

    Criador do tópico Thebigspire

    (@thebigspire)

    7 anos, 5 meses atrás

    Muito obrigado, Mário!

Visualizando 2 respostas - 1 até 2 (de um total de 2)
  • O tópico ‘Como adicionar uma imagem sobre um vídeo?’ está fechado para novas respostas.