Vídeo Centrado com Textos

31 de dezembro de 2022

Compatibilidade: Qualquer tema do Shopify funciona melhor nos temas GRATUITOS do Shopify 2.0

Adicione um vídeo com seção de texto ao seu site do Shopify. Você pode escolher sua fonte de vídeo no YouTube, Vimeo ou até mesmo fonte interna. Também adicionei um raio de contêiner de vídeo.

Lembre-se de que, devido à política do navegador, o vídeo será silenciado quando for reproduzido automaticamente. Consulte a política aqui . Alguns estilos CSS podem variar dependendo do tema.

Certifique-se de ajustar o tamanho do vídeo. Nesta seção, é recomendado usar um vídeo com proporção de 2/3.

Confira a loja DEMO aqui 💻 . Senha: made4uo

Se você quiser um vídeo e um texto, você pode usar esta seção aqui .

O que você está comprando:

O vídeo está no centro com 4 contêineres de texto de cada lado
Seção de vídeo que aceita fonte interna e externa
Código bem escrito sem nenhuma biblioteca externa sendo usada
Capaz de controlar reprodução automática, looping, mostrar/ocultar controles
Capaz de adicionar pôster (imagem de capa) ao usar um vídeo de origem interna
Capaz de redimensionar a altura e largura do vídeo usando a proporção
Suporta tipo de vídeo WebM SOMENTE para vídeo de origem interna

O que torna nosso código melhor:

Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
Não deixamos nem adicionamos códigos para anunciar em nosso site
Nosso código é compatível com dispositivos móveis

Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.

Para iniciar:

1. Vá para Admin Store > Temas > Ações > Editar código.

2. Abra a pasta Seções e clique em “Adicionar uma nova seção”. Você pode nomeá-lo como quiser.

3. Substitua o código padrão da seção recém-criada pelo código abaixo. Em seguida, clique em "SALVAR.

< div
 class = "video-text__container largura da página"
 estilo = " 
preenchimento superior: {{ section.settings.padding_top | append: " px " }} ;
 preenchimento inferior: {{ section.settings.padding_bottom | append: " px " }} ;
 --mobile-video-placement: {{ section.settings.mobile_video_placement }} ;
 --video-margin: {{ section.settings.video_margin |append: " px " }} ;
 "
 >
 { % atribuir grid_area = '' % } 
{ % para bloco na seção. blocos % }
 { % caso forloop. índice % }
 { % quando 1 % }
 { % atribuir grid_area = 'esquerda' % } 
{ % quando 2 % }
 { % atribuir grid_area = 'centro' % }
 { % quando 3 % }
 { % atribuir grid_area = 'direita' % } 
{ % final % }
 { % bloco de casos . tipo % }
 { % quando 'vídeo' % }
 < div class = "video__wrapper" style = "grid-area: {{ grid_area }} " > 
{ % -se bloco. configurações . internal_video_url ! = em branco ou bloco. configurações . internal_video_url_webm ! = em branco -% }
 < vídeo
 { % se bloco. configurações . ativar_loop % }
 laço 
{ % fim se % }
 jogar online
 { % se bloco. configurações . ativar_controles % }
 controles
 { % fim se -% }
 { % se bloco. configurações . ativar_autoplay % }
 reprodução automática silenciada 
{ % fim se % }
 pôster = " {{ block.settings.image_poster | image_url }} "
 estilo = "
 proporção de aspecto: {{ block.settings.upper_number | append: '/' | append: block.settings.lower_number }} ;
 raio da borda: {{block.settings.video_radius | append: 'px' }}
 "
 > 
{ % se bloco. configurações . internal_video_url_webm ! = em branco % }
 < fonte src = " {{block.settings.internal_video_url_webm}} " type = "video/mp4" > 
< fonte src = " {{block.settings.internal_video_url_webm}} " type = "video/webm" >
 { % outro % }
 < fonte src = " {{block.settings.internal_video_url}} " type = "video/mp4" >
 { % fim se % } 
Seu navegador não é compatível para reproduzir o vídeo !
 < / vídeo >
 { %- outro -% }
 { % -se bloco. configurações . URL_vídeo_externo . digite == 'youtube' -% }
 < iframe 
src = "https://www.youtube.com/embed/ {{ block.settings.external_video_url.id }} ?enablejsapi=1 {% if block.settings.enable_autoplay %} &autoplay=1&muted=1 {% endif %} {% if block.settings.enable_loop %} &loop=1&playlist= {{ block.settings.external_video_url.id }} {% endif %} {% if block.settings.enable_controls != true %} &controls=0 {% endif %} "
 class = "js-youtube"
 Permitir tela cheia 
style = "proporção: {{ block.settings.upper_number | append: '/' | append: block.settings.lower_number }} ; raio da borda: {{block.settings.video_radius | append: 'px' }} "
 >< / iframe >
 { %- outro -% }
 < iframe 
src = "https://player.vimeo.com/video/ {{ block.settings.external_video_url.id }} ? {% if block.settings.enable_autoplay %} &autoplay=1&muted=1 {% endif %} {% if block.settings.enable_loop %} &loop=1 {% endif %} {% if block.settings.enable_controls != true %} &controls=0 {% endif %} "
 classe = "js-vimeo"
 Permitir tela cheia 
style = "proporção: {{ block.settings.upper_number | append: '/' | append: block.settings.lower_number }} ; raio da borda: {{block.settings.video_radius | append: 'px' }} "
 >< / iframe >
 { %- fim se -% }
 { %- fim se -% }
 < / div >
 
{ % quando 'text_column' % }
 < div class = "text__container" style = "grid-area: {{ grid_area }} " >
 < div class = "video-text__wrapper {{section.settings.content_alignment_1}} " > 
{ % se bloco. configurações . imagem_1 ! = em branco % }
 < img src = " {{ block.settings.image_1 | img_url: " small " }} " alt = " {{ block.settings.image_1 }} " >
 { % fim se % } 
{ % se bloco. configurações . Cabeçallho 1 ! = em branco % }
 < h2
 class = " {{ block.settings.heading_size_1 }} "
 style = "text-align: {{ block.settings.heading_text_align_1 }} ; cor: {{ block.settings.heading_color_1 }} "
 > 
{ { bloquear. configurações . Cabeçallho 1 } }
 < / h2 >
 { %- fim se % } 
< div style = "text-align: {{ block.settings.content_text_align_1 }} " > { { block. configurações . content_1 } } < / div > 
{ % se bloco. configurações . button_label_1 ! = em branco % }
 < um
 href = " {{block.settings.button_link_1}} " 
class = "video-text__button botão btn {% if block.settings.button_style_1 == " botão - primário " %} botão-primário botão - primário {% elsif block.settings.button_style_1 == " botão - secundário " %} botão -botão secundário--secundário {% endif %} "
 >
 { { bloquear. configurações . button_label_1 } }
 < / a > 
{ % fim se % }
 < / div >
 < div class = "video-text__wrapper {{section.settings.content_alignment_2 }} " style = "grid-area: {{ grid_area }} " > 
{ % se bloco. configurações . imagem_2 ! = em branco % }
 < img src = " {{ block.settings.image_2 | img_url: " small " }} " alt = " {{ block.settings.image_2 }} " >
 { % fim se % } 
{ % se bloco. configurações . título_2 ! = em branco % }
 < h2
 class = " {{ block.settings.heading_size_2 }} "
 style = "text-align: {{ block.settings.heading_text_align_2 }} ; cor: {{ block.settings.heading_color_2 }} "
 > 
{ { bloquear. configurações . título_2 } }
 < / h2 >
 { %- fim se % } 
< div style = "text-align: {{ block.settings.content_text_align_2 }} " > { { block. configurações . content_2 } } < / div > 
{ % se bloco. configurações . button_label_2 ! = em branco % }
 < um
 href = " {{block.settings.button_link_2}} " 
class = "video-text__button botão btn {% if block.settings.button_style_2 == " botão - primário " %} botão-primário botão - primário {% elsif block.settings.button_style_2 == " botão - secundário " %} botão -botão secundário--secundário {% endif %} "
 >
 { { bloquear. configurações . button_label_2 } }
 < / a > 
{ % fim se % }
 < / div >
 < / div >
 { % final % }
 { % fim para % }
 < / div > 
<estilo> _
 . vídeo - text__container {
 exibição : grade ;
 grid - template - colunas : repita ( 4,25 % ) ; 
grid - template - rows : repetir ( 4,25 % ) ;
 lacuna : 0px 0px ;
 grade - modelo - áreas :
 "esquerda centro centro direita"
 "esquerda centro centro direita"
 "esquerda centro centro direita"
 "esquerda centro centro direita" ;
 margem : automática ; 
altura : conteúdo máximo ;
 largura : 100 % ;
 }

 . vídeo - text__container > * {
 largura : 100 % ;
 altura : 100 % ;
 margem : automática ; 
}

 . video__wrapper > * {
 largura : 100 % ;
 borda - raio : { { seção. configurações . raio_de_vídeo | acrescentar : 'px' } } ;
 borda : nenhuma ;
 }
 
. vídeo__wrapper {
 área da grade : centro ;
 exibição : flexível ;
 alinhar - conteúdo : centro ;
 justificar - conteúdo : centro ;
 }

 . vídeo__wrapper vídeo {
 altura : automático ;
 }

 . vídeo - texto__button { 
largura : conteúdo máximo ;
 }

 . vídeo - texto__wrapper {
 exibição : flexível ;
 flex - direction : coluna ;
 preenchimento : 0 2,5rem ;
 alinhar - itens : flex - start ;
 justificar - conteúdo : flex - start ; 
margem : 2rem 0 ;
 }

 . texto__container {
 exibição : flexível ;
 flex - direction : coluna ;
 justificar - conteúdo : espaço uniformemente ;
 }

 . vídeo - text__wrapper img {
 largura : 40px ; 
altura : automático ;
 proporção de aspecto : 1 ;
 margem inferior : 1rem ;
 exibição : flexível ;
 alinhar - self : iniciar ;
 }

 . vídeo - text__wrapper div {
 margem inferior : 1rem ;
 }
 
. vídeo - text__wrapper h2 {
 margem : 0 ;
 altura da linha : 1,2 ;
 }

 . vídeo - text__wrapper p {
 margem : 0,5rem 0 ;
 altura da linha : 1,4 ;
 }
 
. vídeo - texto__wrapper . maiúscula {
 transformação de texto : maiúscula ;
 espaçamento entre letras : 2px ;
 margem : 1rem 0 ;
 }

 h2. h0 {
 tamanho da fonte : braçadeira ( 4rem, 2vw, 5,2rem ) ;
 }
 
h2. h1 {
 tamanho da fonte : braçadeira ( 3rem, 2vw, 4rem ) ;
 }

 h2. h2 {
 tamanho da fonte : braçadeira ( 2rem, 2vw, 2,4rem ) ;
 }

 Tela @media somente e ( largura máxima : 1025px ) { 
. vídeo - text__container {
 grade - modelo - áreas :
 "esquerda esquerda centro centro"
 "esquerda esquerda centro centro"
 "certo, certo, certo, certo"
 "certo, certo, certo, certo" ;
 }
 }

 Tela @media somente e ( largura máxima : 1025px ) { 
. vídeo - text__container {
 exibição : flexível ;
 flex - direction : coluna ;
 }
 }
 < / estilo >
 { % esquema % }
 {
 "name" : "Vídeo centralizado com textos" , 
"configurações" : [
 {
 "tipo" : "intervalo" ,
 "id" : "padding_top" ,
 "min" : 0 ,
 "máximo" : 150 ,
 "passo" : 5 ,
 "unidade" : "px" , 
"label" : "Preenchimento superior" ,
 "padrão" : 30
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "padding_bottom" ,
 "min" : 0 ,
 "máximo" : 150 ,
 "passo" : 5 , 
"unidade" : "px" ,
 "label" : "Preenchimento inferior" ,
 "padrão" : 30
 }
 ] ,
 "predefinições" : [
 {
 "name" : "Vídeo centralizado com textos" ,
 "blocos" : [
 { 
"tipo" : "texto_coluna"
 } ,
 {
 "tipo" : "vídeo"
 } ,
 {
 "tipo" : "texto_coluna"
 }
 ]
 }
 ] ,
 "blocos" : [
 {
 "tipo" : "vídeo" , 
"nome" : "Vídeo" ,
 "limite" : 1 ,
 "configurações" : [
 {
 "tipo" : "video_url" ,
 "id" : "external_video_url" ,
 "aceitar" : [
 "YouTube" ,
 "vimeo"
 ] , 
"default" : "https:\/\/youtu.be\/zGL2sBgBLoI" ,
 "label" : "URL do vídeo externo" ,
 "espaço reservado" : "https://youtu.be/zGL2sBgBLoI" ,
 "info" : "Para vídeo externo, adicione o link e deixe o vídeo interno em branco."
 } ,
 {
 "tipo" : "texto" ,
 "id" : "internal_video_url" , 
"label" : "URL do vídeo interno" ,
 "info" : "Para vídeo interno, adicione o link e deixe o vídeo externo em branco."
 } ,
 {
 "tipo" : "texto" ,
 "id" : "internal_video_url_webm" ,
 "label" : "Tipo WebM de URL de vídeo interno" ,
 "info" : "Para vídeo interno, adicione o link e deixe o vídeo externo em branco." 
} ,
 {
 "type" : "image_picker" ,
 "id" : "image_poster" ,
 "label" : "Pôster de imagem, funciona apenas com vídeo de origem interna"
 } ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "Tamanho da proporção do vídeo" , 
"info" : "Isso afeta a largura e a altura do vídeo. Use 1/1 se o vídeo for quadrado, 8/6 para retângulo"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "número_superior" ,
 "min" : 0 ,
 "máximo" : 50 ,
 "passo 1 , 
"label" : "Número superior do vídeo" ,
 "padrão" : 24
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "número_inferior" ,
 "min" : 0 ,
 "máximo" : 50 ,
 "passo 1 , 
"label" : "Número inferior do vídeo" ,
 "padrão" : 13
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "video_radius" ,
 "min" : 0 ,
 "máximo" : 100 ,
 "passo 1 , 
"padrão" : 10 ,
 "label" : "Raio do quadro do vídeo"
 } ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "Configurações de vídeo" ,
 "info" : "Observação: se escolher a reprodução automática, o vídeo será silenciado automaticamente, de acordo com as diretrizes do navegador da Web [aqui](https:\/\/developer.chrome.com\/blog\/autoplay)"
 } ,
 { 
"tipo" : "caixa de seleção" ,
 "id" : "enable_autoplay" ,
 "padrão" : verdadeiro ,
 "label" : "Ativar reprodução automática"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "enable_loop" ,
 "padrão" : verdadeiro , 
"label" : "Ativar loop"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "enable_controls" ,
 "padrão" : verdadeiro ,
 "label" : "Ativar controles"
 }
 ]
 } ,
 { 
"tipo" : "coluna_texto" ,
 "nome" : "texto" ,
 "limite" : 2 ,
 "configurações" : [
 {
 "tipo" : "cabeçalho" ,
 "content" : "Seção de texto 1" ,
 "info" : "Deixe a área em branco para ocultar"
 } , 
{
 "type" : "image_picker" ,
 "id" : "imagem_1" ,
 "rótulo" : "Imagem"
 } ,
 {
 "tipo" : "texto" ,
 "id" : "título_1" ,
 "default" : "Vídeo centralizado com textos" , 
"rótulo" : "Texto"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "título_color_1" ,
 "padrão" : "#000" ,
 "label" : "Cor do texto do título"
 } ,
 {
 "tipo" : "selecionar" , 
"id" : "título_tamanho_1" ,
 "info" : "Funciona apenas com temas GRATUITOS do Shopify 2.0" ,
 "opções" : [
 {
 "valor" : "h3" ,
 "rótulo" : "pequeno"
 } ,
 {
 "valor" : "h2" , 
"rótulo" : "médio"
 } ,
 {
 "valor" : "h1" ,
 "rótulo" : "grande"
 }
 ] ,
 "padrão" : "h2" ,
 "label" : "Tamanho do título"
 } ,
 {
 "tipo" : "selecionar" , 
"id" : "título_text_align_1" ,
 "opções" : [
 {
 "valor" : "esquerda" ,
 "label" : "alinhar à esquerda"
 } ,
 {
 "valor" : "certo" ,
 "label" : "alinhar à direita"
 } ,
 { 
"valor" : "justificar" ,
 "rótulo" : "justificar"
 } ,
 {
 "valor" : "centro" ,
 "rótulo" : "centro"
 }
 ] ,
 "padrão" : "centro" ,
 "label" : "Alinhamento do texto do título"
 } ,
 { 
"type" : "richtext" ,
 "id" : "conteúdo_1" ,
 "default" : "<p>Combine o texto com um vídeo para focar no produto, coleção ou postagem do blog escolhido. Adicione detalhes sobre disponibilidade, estilo ou até mesmo forneça uma avaliação.</p>" ,
 "label" : "richtext"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "content_text_align_1" , 
"opções" : [
 {
 "valor" : "esquerda" ,
 "label" : "alinhar à esquerda"
 } ,
 {
 "valor" : "certo" ,
 "label" : "alinhar à direita"
 } ,
 {
 "valor" : "justificar" , 
"rótulo" : "justificar"
 } ,
 {
 "valor" : "centro" ,
 "rótulo" : "centro"
 }
 ] ,
 "padrão" : "centro" ,
 "label" : "Alinhamento do texto do conteúdo"
 } ,
 {
 "tipo" : "texto" , 
"id" : "button_label_1" ,
 "default" : "Etiqueta do botão" ,
 "label" : "Etiqueta do botão"
 } ,
 {
 "tipo" : "url" ,
 "id" : "botão_link_1" ,
 "label" : "Link do botão"
 } ,
 { 
"tipo" : "selecionar" ,
 "id" : "button_style_1" ,
 "opções" : [
 {
 "valor" : "botão primário" ,
 "label" : "botão primário"
 } ,
 {
 "valor" : "botão secundário" , 
"label" : "botão secundário"
 } ,
 {
 "valor" : "" ,
 "rótulo" : "nenhum"
 }
 ] ,
 "default" : "botão primário" ,
 "label" : "Estilo do botão" ,
 "info" : "O estilo do botão depende do tema usado."
 } , 
{
 "tipo" : "cabeçalho" ,
 "content" : "Seção de texto 2" ,
 "info" : "Deixe a área em branco para ocultar"
 } ,
 {
 "type" : "image_picker" ,
 "id" : "imagem_2" ,
 "rótulo" : "Imagem"
 } ,
 { 
"tipo" : "texto" ,
 "id" : "título_2" ,
 "default" : "Vídeo centralizado com textos" ,
 "rótulo" : "Texto"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "título_color_2" ,
 "padrão" : "#000" , 
"label" : "Cor do texto do título"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "título_tamanho_2" ,
 "info" : "Funciona apenas com temas GRATUITOS do Shopify 2.0" ,
 "opções" : [
 {
 "valor" : "h3" , 
"rótulo" : "pequeno"
 } ,
 {
 "valor" : "h2" ,
 "rótulo" : "médio"
 } ,
 {
 "valor" : "h1" ,
 "rótulo" : "grande"
 }
 ] ,
 "padrão" : "h2" , 
"label" : "Tamanho do título"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "título_text_align_2" ,
 "opções" : [
 {
 "valor" : "esquerda" ,
 "label" : "alinhar à esquerda"
 } ,
 { 
"valor" : "certo" ,
 "label" : "alinhar à direita"
 } ,
 {
 "valor" : "justificar" ,
 "rótulo" : "justificar"
 } ,
 {
 "valor" : "centro" ,
 "rótulo" : "centro"
 }
 ] , 
"padrão" : "centro" ,
 "label" : "Alinhamento do texto do título"
 } ,
 {
 "type" : "richtext" ,
 "id" : "conteúdo_2" ,
 "default" : "<p>Combine o texto com um vídeo para focar no produto, coleção ou postagem do blog escolhido. Adicione detalhes sobre disponibilidade, estilo ou até mesmo forneça uma avaliação.</p>" , 
"label" : "richtext"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "content_text_align_2" ,
 "opções" : [
 {
 "valor" : "esquerda" ,
 "label" : "alinhar à esquerda"
 } ,
 { 
"valor" : "certo" ,
 "label" : "alinhar à direita"
 } ,
 {
 "valor" : "justificar" ,
 "rótulo" : "justificar"
 } ,
 {
 "valor" : "centro" ,
 "rótulo" : "centro"
 }
 ] , 
"padrão" : "centro" ,
 "label" : "Alinhamento do texto do conteúdo"
 } ,
 {
 "tipo" : "texto" ,
 "id" : "button_label_2" ,
 "default" : "Etiqueta do botão" ,
 "label" : "Etiqueta do botão"
 } ,
 { 
"tipo" : "url" ,
 "id" : "botão_link_2" ,
 "label" : "Link do botão"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "button_style_2" ,
 "opções" : [
 { 
"valor" : "botão primário" ,
 "label" : "botão primário"
 } ,
 {
 "valor" : "botão secundário" ,
 "label" : "botão secundário"
 } ,
 {
 "valor" : "" ,
 "rótulo" : "nenhum"
 } 
] ,
 "default" : "botão primário" ,
 "label" : "Estilo do botão" ,
 "info" : "O estilo do botão depende do tema usado."
 }
 ]
 }
 ]
 }
 { % termina o esquema % }