Como exibir vídeo por meio de campo dinâmico e tag dinâmica no Listing Template

Adicionando o metacampo

Existem duas fontes que você pode usar: Custom Post Type e default post type . Antes de começarmos a adicionar metacampos, certifique-se de que você os possui. Este tutorial revela as ações que você deve realizar para adicionar metacampos ao tipo de postagem personalizada e é recomendado escolher o tipo de texto .

Se você precisar adicionar um metacampo aos Posts padrão do WordPress, recomendamos que você vá para JetEngine > Meta Box , crie um novo Meta Box e, em seguida, anexe-o aos Posts . Verifique este tutorial para obter mais detalhes sobre como adicionar metacampos personalizados às postagens padrão do WP.

Ajustando o vídeo à postagem

A próxima coisa que você precisa fazer é ajustar o link do vídeo para a postagem onde deseja que ele apareça.

Agora vá para WP Dashboard > Media , clique no botão “Adicionar novo” e carregue o vídeo para sua biblioteca. Clique no vídeo enviado e na barra lateral direita você verá o link – copie-o para a área de transferência.

Prossiga para a janela de edição de postagem e insira o link para o metacampo correspondente. Depois, clique no botão “ Atualizar ” para salvar as alterações.

Exibindo o vídeo em uma listagem

Existem duas opções que você pode escolher para extrair o vídeo:

• usando código HTML ;
• através do widget Vídeo .

Mostrando o vídeo usando o código HTML

Depois de realizadas as ações anteriores, é hora de organizar o conteúdo existente das postagens. Nesta etapa não vamos nos aprofundar nos detalhes de como criar um Listing Template , pois todos eles já estão disponíveis aqui .

Usaremos o widget Campo Dinâmico . Escolha a opção “Meta Dados” no menu suspenso Fonte e, no Campo Meta, selecione aquele onde você adicionou o link do vídeo.

Em seguida, você precisa ativar a alternância Personalizar saída do campo . Na seguinte área de texto Formato de campo , você deve inserir este código HTML para exibir o vídeo no formato .mp4.

A linha com a fonte varia dependendo do formato de vídeo que você deseja usar.

• Para o vídeo .ogv, será este ;
• Para o formato .webm do vídeo, o código será deste tipo.

Na linha do código com a fonte, poderíamos ter inserido o link como estava, mas neste caso o mesmo vídeo apareceria em todos os posts. Para manter a representação dinâmica do conteúdo, inserimos as %smacros e agora ele gera os valores do metacampo.

Mostrando o vídeo com o widget Vídeo

Arraste e solte o widget Vídeo na página e, no menu suspenso Fonte, escolha a opção “Auto-hospedado”. Ative a alternância de URL externo e clique no botão “Tags dinâmicas” no canto direito do próximo campo. Escolha a opção JetEngine “Campo Personalizado”. Clique no campo novamente e, na lista suspensa Campo, selecione o metacampo com o URL do vídeo.

Ajuste as outras configurações para personalizar a reprodução do vídeo.

Adicionando os metacampos

Esta etapa duplica as etapas da primeira parte deste tutorial. Mais informações sobre a criação de metacampos você pode encontrar nesta visão geral detalhada . Além disso, certifique-se de ter criado o metacampo tipo texto.

Agora você precisa inserir o link do vídeo da fonte de hospedagem do YouTube ou Vimeo no metacampo de cada postagem.

Exibindo o vídeo na listagem

Para exibir o vídeo na listagem, você precisa ir até JetEngine > Listings , criar o novo e abri-lo no editor Elementor. Mais uma vez, trabalharemos com o widget Campo Dinâmico , então encontre-o e solte-o na página.

No menu suspenso Fonte , escolha a opção “Meta Dados” e, na lista Meta Campo, escolha o campo onde você colocou o URL. Em seguida, ative a alternância de saída do campo Filtro e escolha a opção “Incorporar URL”.

Depois que o vídeo for escolhido, é hora de brincar com os recursos adicionais na guia Estilo .