Vídeo com seção de texto

 <estilo> _
 . videoTextContainer {
 exibição : flexível ;
 margem : 0 var ( -margem de vídeo ) ;
 lacuna : var ( -video - gap ) ;
 } 
Tela @media somente e ( largura mínima : 951px ) {
 . vídeo - esquerda {
 flex - direction : linha ;
 }
 . vídeo - certo {
 flex - direction : linha - reversa ;
 } 
. vídeo - certo. textWrapper {
 preenchimento - certo : 5 %;
 }
 }
 . videoTextContainer > * {
 largura : 50 %;
 margem : automática ;
 }
 . videoWrapper { 
estouro : oculto ;
 }
 . videoWrapper -- caixa {
 posição : relativa ;
 }
 . videoWrapper -- caixa > * {
 largura : 100 %;
 borda : nenhuma ;
 ajuste ao objeto : capa ; 
posição do objeto : centro centro ;
 exibição : bloco ;
 }
 . videoWrapper -- caixa > img {
 posição : absoluta ;
 índice z : 2 ;
 topo : 0 ;
 esquerda : 0 ; 
largura : 100 %;
 altura : 100 %;
 }
 . videoTextButton {
 largura : conteúdo máximo ;
 }
 . textWrapper {
 exibição : flexível ;
 flex - direction : coluna ;
 } 
. textWrapper > h2 {
 margem : 0 ;
 }
 . textoWrapper . maiúscula {
 transformação de texto : maiúscula ;
 espaçamento entre letras : 2px ;
 margem : 1rem 0 ;
 } 
Tela @media somente e ( largura máxima : 950px ) {
 . videoTextContainer {
 flex - direction : var ( -mobile - video - placement ) ;
 margem : 0,5 % ;
 } 
. videoTextContainer > * {
 largura : 100 %;
 }
 . vídeo - certo. textWrapper ,
 . vídeo - esquerda . textWrapper {
 preenchimento : 0 ! importante ;
 } 
. margem - inferior - celular {
 margem inferior : 2rem ;
 }
 }
 </ estilo >
 < div
 { % se seção. configurações . página padrão % }
 class = "largura da página" 
{ % fim se % }
 >
 < div
 class = "videoTextContainer {{section.settings.video_placement}} "
 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 " }} ;
 --video-gap: {{ section.settings.video_gap |append: " px " }}
 "
 >
 < div
 class = "videoWrapper {% if section.settings.mobile_video_placement == " coluna " %} margin-bottom--desktop {% endif %} "
 style = "border-radius: {{section.settings.video_radius | append: 'px' }} "
 > 
{ % capture video_loader % } { % if seção. configurações . image_poster % } carregador de vídeo { % else % } div { % endif % } { % endcapture % } 
< { { video_loader } } class = "videoWrapper--box" >
 { % -se seção. configurações . internal_video_url ! = em branco ou seção. configurações . internal_video_url_webm != em branco -% }
 < vídeo 
{ % se seção. configurações . ativar_loop % }
 laço
 { % fim se % }
 jogar online
 { % se seção. configurações . ativar_controles % }
 controles 
{ % fim se % }
 { % se seção. configurações . ativar_autoplay % }
 preload = "auto" reprodução automática silenciada
 { % fim se % } 
{ % se seção. configurações . imagem_poster != em branco % }
 pôster = " {{ section.settings.image_poster | image_url }} "
 { % fim se % }
 style = "proporção: {{ section.settings.upper_number | append: '/' | append: section.settings.lower_number }} ;"
 > 
{ % se seção. configurações . internal_video_url_webm != em branco % }
 < fonte src = " {{section.settings.internal_video_url_webm}} " type = "video/mp4" > 
< fonte src = " {{section.settings.internal_video_url_webm}} " type = "video/webm" >
 { % outro % }
 < fonte src = " {{section.settings.internal_video_url}} " type = "video/mp4" > 
{ % fim se % }
 Seu navegador não é compatível para reproduzir o vídeo !
 </ vídeo >
 { %- outro -% } 
{ % -se seção. configurações . URL_vídeo_externo . digite == 'youtube' -% }
 < iframe 
src = "https://www.youtube.com/embed/ {{ section.settings.external_video_url.id }} ? {% if section.settings.enable_autoplay %} autoplay=1&mute=1 {% endif %} {% if section.settings.enable_loop %} &loop=1&playlist= {{ section.settings.external_video_url.id }} {% endif %} {% unless section.settings.enable_controls %} &controls=0 {% endunless %} " 
{ % se seção. configurações . ativar_autoplay % }
 permitir = "acelerômetro; reprodução automática; gravação na área de transferência; mídia criptografada; giroscópio; imagem em imagem" silenciado
 { % fim se % }
 Permitir tela cheia
 style = "proporção: {{ section.settings.upper_number | append: '/' | append: section.settings.lower_number }} ;" 
</ iframe >
 { %- outro -% }
 < iframe 
src = "https://player.vimeo.com/video/ {{ section.settings.external_video_url.id }} ? {% if section.settings.enable_autoplay %} &autoplay=1&muted=1 {% endif %} {% if section.settings.enable_loop %} &loop=1&playlist= {{ section.settings.external_video_url.id }} {% endif %} {% unless section.settings.enable_controls %} &controls=0 {% endunless %} "
 classe = "js-vimeo"
 Permitir tela cheia 
style = "proporção: {{ section.settings.upper_number | append: '/' | append: section.settings.lower_number }} ;"
 </ iframe >
 { %- fim se -% }
 { %- fim se -% } 
{ % se seção. configurações . imagem_poster != em branco % }
 { {
 seção. configurações . imagem_poster
 | URL_da_imagem : largura : 900 
| image_tag : alt : seção. configurações . imagem_poster . alt , tamanhos : '50vw' , larguras : '1100, 1500'
 } }
 { % fim se % } 
</ { { video_loader } } >
 </div> _ _
 < div class = "textWrapper {% if section.settings.mobile_video_placement == " coluna - reverso " %} margin-bottom--mobile {% endif %} " > 
{ % para bloco na seção. blocos % }
 { % bloco de casos . tipo % }
 { % quando 'legenda' % } 
< classe pequena = " {{block.settings.text_style}} " estilo = "alinhamento de texto: {{ block.settings.caption_alignment}} " >
 { { - bloquear. configurações . legenda - } }
 </ pequeno > 
{ % quando 'título' % }
 < h2 class = " {{ block.settings.heading_size }} " style = "text-align: {{ block.settings.heading_alignment}} " >
 { { bloquear. configurações . cabeçalho } }
 </ h2 > 
{ % quando 'conteúdo' % }
 < estilo div = "alinhamento de texto: {{ block.settings.content_alignment}} " >
 { { bloquear. configurações . contente } }
 </div> _ _ 
{ % quando 'botão' % }
 { % se bloco. configurações . button_label != em branco % }
 < um
 href = " {{block.settings.button_link}} "
 style = "align-self: {{ block.settings.button_alignment }} " 
class = "botão videoTextButton btn {% if block.settings.button_style == " botão - primário " %} botão-primário botão--primário {% elsif block.settings.button_style == " botão - secundário " %} botão-secundário botão--secundário {% endif %} "
 >
 { { bloquear. configurações . rótulo_de_botão - } } 
</a> _
 { % fim se % }
 { % final % }
 { % fim para % }
 </div> _ _
 </div> _ _
 </div> _ _ 
<roteiro> _
 if ( ! customElements. get ( 'carregador de vídeo' ) ) {
 elementos personalizados. define ( 'video-loader' , classe VideoLoader estende HTMLElement {
 construtor ( ) { 
super ( ) ;
 esse . vídeo = isto . querySelector ( 'vídeo' ) ;
 esse . iframe = isto . querySelector ( 'iframe' ) ; 
esse . imagem = isto . querySelector ( 'img' ) ;
 if ( este . iframe ) isto . imagem . estilo . exibir = "nenhum" ; 
if ( este . vídeo ) isto . vídeo . addEventListener ( " canplay " , isto.init.bind ( isto ) )
 }

 iniciar ( ) { 
if ( este . vídeo . readyState * 1 >= 3 ) {
 esse . imagem . estilo . exibir = "nenhum" ; 
if ( este . vídeo ) isto . vídeo . jogar ( )
 }
 }
 } ) ;
 }
 </roteiro> _
 { % esquema % }
 { 
"name" : "Vídeo com texto" ,
 "configurações" : [
 {
 "tipo" : "caixa de seleção" ,
 "id" : "default_page" ,
 "label" : "Adaptar largura de página padrão" , 
"info" : "Aplica-se apenas a temas gratuitos do Shopify 2.0."
 } ,
 {
 "tipo" : "video_url" ,
 "id" : "external_video_url" ,
 "aceitar" : [
 "YouTube" ,
 "vimeo"
 ] , 
"padrão" : "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" : "Mostrar imagem até o vídeo ser carregado"
 } ,
 {
 "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" : "selecionar" ,
 "id" : "video_placement" ,
 "info" : "Ony funciona com desktop" , 
"opções" : [
 {
 "valor" : "vídeo-esquerdo" ,
 "label" : "vídeo restante"
 } ,
 {
 "valor" : "vídeo-direito" ,
 "label" : "vídeo certo"
 } 
] ,
 "default" : "vídeo-esquerdo" ,
 "label" : "Posicionamento do vídeo no desktop"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "mobile_video_placement" , 
"info" : "Ony funciona com tablet/celular" ,
 "opções" : [
 {
 "valor" : "coluna" ,
 "label" : "vídeo superior"
 } ,
 {
 "valor" : "coluna reversa" , 
"label" : "fundo do vídeo"
 }
 ] ,
 "padrão" : "coluna" ,
 "label" : "Posicionamento de vídeo em dispositivos móveis"
 } ,
 {
 "tipo" : "intervalo" , 
"id" : "margem_de_vídeo" ,
 "min" : 0 ,
 "máximo" : 200 ,
 "passo" : 5 ,
 "padrão" : 5 ,
 "unidade" : "px" , 
"label" : "Margens esquerda e direita do vídeo"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "video_gap" ,
 "min" : 0 ,
 "máximo" : 150 , 
"passo" : 5 ,
 "unidade" : "px" ,
 "label" : "Lacuna no contêiner de vídeo e texto" ,
 "padrão" : 30
 } ,
 {
 "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 com texto" ,
 "blocos" : [
 {
 "tipo" : "título"
 } ,
 {
 "tipo" : "legenda"
 } ,
 { 
"tipo" : "conteúdo"
 } ,
 {
 "tipo" : "botão"
 }
 ]
 }
 ] ,
 "blocos" : [
 {
 "tipo" : "título" , 
"nome" : "título" ,
 "limite" : 1 ,
 "configurações" : [
 {
 "tipo" : "texto" ,
 "id" : "título" , 
"default" : "Vídeo com texto" ,
 "rótulo" : "Texto"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "heading_size" ,
 "info" : "Funciona apenas com temas GRATUITOS do Shopify 2.0" , 
"opções" : [
 {
 "valor" : "h3" ,
 "rótulo" : "x-pequeno"
 } ,
 {
 "valor" : "h2" ,
 "rótulo" : "pequeno" 
} ,
 {
 "valor" : "h1" ,
 "rótulo" : "médio"
 } ,
 {
 "valor" : "h0" ,
 "rótulo" : "grande"
 } 
] ,
 "padrão" : "h1" ,
 "label" : "Tamanho do título"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "heading_alignment" , 
"opções" : [
 {
 "valor" : "centro" ,
 "rótulo" : "centro"
 } ,
 {
 "valor" : "esquerda" ,
 "rótulo" : "esquerda" 
} ,
 {
 "valor" : "certo" ,
 "rótulo" : "certo"
 } ,
 {
 "valor" : "justificar" ,
 "rótulo" : "justificar"
 } 
] ,
 "padrão" : "centro" ,
 "label" : "Alinhamento do texto do título"
 }
 ]
 } ,
 {
 "tipo" : "legenda" ,
 "nome" : "legenda" , 
"limite" : 1 ,
 "configurações" : [
 {
 "tipo" : "texto" ,
 "id" : "legenda" ,
 "default" : "Adicionar um slogan" ,
 "rótulo" : "legenda" 
} ,
 {
 "tipo" : "selecionar" ,
 "id" : "estilo_texto" ,
 "opções" : [
 {
 "valor" : "legenda" ,
 "rótulo" : "Legenda" 
} ,
 {
 "valor" : "maiúsculas" ,
 "rótulo" : "Maiúsculas"
 }
 ] ,
 "padrão" : "maiúsculas" ,
 "label" : "Legenda"
 } , 
{
 "tipo" : "selecionar" ,
 "id" : "caption_alignment" ,
 "opções" : [
 {
 "valor" : "centro" ,
 "rótulo" : "centro"
 } , 
{
 "valor" : "esquerda" ,
 "rótulo" : "esquerda"
 } ,
 {
 "valor" : "certo" ,
 "rótulo" : "certo"
 } ,
 { 
"valor" : "justificar" ,
 "rótulo" : "justificar"
 }
 ] ,
 "padrão" : "centro" ,
 "label" : "Alinhamento do texto da legenda"
 }
 ]
 } ,
 { 
"tipo" : "conteúdo" ,
 "nome" : "conteúdo" ,
 "limite" : 1 ,
 "configurações" : [
 {
 "type" : "richtext" , 
"id" : "conteúdo" ,
 "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_alignment" ,
 "opções" : [
 {
 "valor" : "centro" ,
 "rótulo" : "centro"
 } ,
 {
 "valor" : "esquerda" , 
"rótulo" : "esquerda"
 } ,
 {
 "valor" : "certo" ,
 "rótulo" : "certo"
 } ,
 {
 "valor" : "justificar" , 
"rótulo" : "justificar"
 }
 ] ,
 "padrão" : "centro" ,
 "label" : "Alinhamento do texto do conteúdo"
 }
 ]
 } ,
 {
 "tipo" : "botão" , 
"nome" : "botão" ,
 "limite" : 1 ,
 "configurações" : [
 {
 "tipo" : "texto" ,
 "id" : "button_label" , 
"default" : "Etiqueta do botão" ,
 "label" : "Etiqueta do botão"
 } ,
 {
 "tipo" : "url" ,
 "id" : "botão_link" ,
 "label" : "Link do botão" 
} ,
 {
 "tipo" : "selecionar" ,
 "id" : "estilo_botão" ,
 "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" : "selecionar" , 
"id" : "button_alignment" ,
 "opções" : [
 {
 "valor" : "centro" ,
 "rótulo" : "centro"
 } ,
 {
 "valor" : "flex-end" , 
"rótulo" : "esquerda"
 } ,
 {
 "valor" : "início flexível" ,
 "rótulo" : "certo"
 }
 ] ,
 "padrão" : "centro" , 
"label" : "Alinhamento do botão"
 }
 ]
 }
 ]
 }
 { % termina o esquema % }