Why is my homepage video constantly loading on debut theme?

[Pathway_Sucess]

 I'm trying to insert this video into the homepage of the debut theme.The video is forever loading and the play button doesn't work. How can I fix this?

https://www.youtube.com/watch?v=p7DjwxFcUdA

Heres the link to my store:

https://simplywooden.myshopify.com/

[Visely-Team]

@Akhilkotha96 what's your store URL?

[foundonthemoon]

https://moonchildrenent.com/

[Akhilkotha96]

Hi,

Now video is loading .I had changed code to return

function getVideoOptions(evt) {
videos[evt.target.g.g.id];
}

[Broncos123]

Can you look at mine too?

www.rkover.com

https://www.youtube.com/watch?v=oiF_edDMzdQ

[Visely-Team]

@Broncos123 the video loads for me with no issues, have you fixed it by now?

[ToniHannan]

Hi

The video on my site is not working. Ive checeked the kiquid theme and cant find the html text in my code at all.

Here is my video im trying to use https://youtu.be/sKcQkTT17dw

[Visely-Team]

@ToniHannan if you can’t find that snippet it might be the issue is a different one. Still if you can share a (preview) URL to your store I can have a look.

[SajanGoel]

Hey Hi, I hope you're doing well. Actually I'm also on the same page but In my case video is loading but its poster is not hiding after video starts. I've already changed 'a' to 'l' in my theme.js file. Here is a my store link https://www.mattioligioielli.it

It'll very helpful. Please have a look.

Thank you

[Visely-Team]

@SajanGoel the issue is not related to the original post, but here is a fix you can try. In your theme.scss.liquid file find a snippet that looks like:

.video__iframe {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease
}

and change it to read:

.loaded { 
.video__iframe {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease
}
}

[SajanGoel]

Yes, It worked perfectly.

Thank you... Thank you so much 🙂

[mads2406]

Hi. 
I have same issue, and have tried fixes in the thread. 
Store link is: https://mysharps.net/ 

video link is: https://www.youtube.com/watch?v=FS36rLEbqc0 

Thank you, 
Mads

[Visely-Team]

@mads2406 doesn't look like you did 🙂 , this fix should have worked for you - https://community.shopify.com/c/Technical-Q-A/Video-Not-loading/m-p/684244/highlight/true#M20578

[foundonthemoon]

also having that issue change the code from .a to .l and still no change for me

---

@Visely-Team wrote:

@mads2406 doesn't look like you did 🙂 , this fix should have worked for you - https://community.shopify.com/c/Technical-Q-A/Video-Not-loading/m-p/684244/highlight/true#M20578

---

[STLCycleSaloon]

I'm having the same issue. Can you help out? 

Video: https://youtu.be/A18V_8FuVw0

Site: www.stlcyclesaloon.com

[Visely-Team]

@STLCycleSaloon replace a with f and you should be good. Instead of:

function getVideoOptions(evt) {
    return videos[evt.target.a.id];
}

should read:

function getVideoOptions(evt) {
    return videos[evt.target.f.id];
}

[STLCycleSaloon]

That worked. Thank you! 

[fontaine]

Hello,

I'm having the same issue and tried to find that code within my theme.js.liquid but couldn't locate it. Not sure what my issue is by my homepage video also isn't playing: https://bluequail.com/

[Visely-Team]

@fontaine the issue is similar to the original issue reported, however the code is slightly different. Try searching for function onPlayerReady(event in your theme.js.liquid file, you should see something like this:

  function onPlayerReady(event) {
    var id = $(event.target.a).attr('id');
    $(event.target.a).attr('tabindex', '-1');
    
    if (enableSound) {
      event.target.unMute();  
    } else {
      event.target.mute();
    }
    
    event.target.playVideo();

    $(event.target.a).parent().addClass('loaded');

    checkPlayerVisibility(id);

    $(window).on('scroll.' + id, { id: id }, $.throttle(150, checkPlayerVisibility));
  }

replace all occurrences of event.target.a with event.target.m. The updated snippet should look like:

  function onPlayerReady(event) {
    var id = $(event.target.m).attr('id');
    $(event.target.m).attr('tabindex', '-1');
    
    if (enableSound) {
      event.target.unMute();  
    } else {
      event.target.mute();
    }
    
    event.target.playVideo();

    $(event.target.m).parent().addClass('loaded');

    checkPlayerVisibility(id);

    $(window).on('scroll.' + id, { id: id }, $.throttle(150, checkPlayerVisibility));
  }

[fontaine]

Thanks for the quick reply! I did that and the video is still not working. Here's a screenshot of the code I edited:
[cid:ce9790f6-758f-4f77-84f0-2d2bccd95266]

[Visely-Team]

@fontaine there are no more errors in the browser console and video previews are loading fine for me on your home page. Try refreshing the page or clear your cache. What browser are you using?

By the way, can't see the screenshot you were referring to?

[fontaine]

Oh I'm glad it's working for you. I just checked on Safari and Chrome and still not seeing the video.

[Visely-Team]

@fontaine tested in in Chrome, Safari, Firefox, and I see the videos loading so it's either a local issue or a misunderstanding on the expectations. Can you share a screenshot of what you see? The one you said you've uploaded previously wasn't attached to the post.

[fontaine]

Sorry about that other screenshot not showing up. Here you go - the code that I edited to make the video play.

On my end, even after clearing my cache when I go to the site on both Safari and Chrome the video should start to play but I only see the poster image that I set to display while the video is loading. Here's a screenshot of that (the still looks just like the video so kind of hard to tell but it's just a photo):

[fontaine]

Any more thoughts on what my issue could be? I cleared the cache and had feedback from someone else that the video is not loading either. The home page image should be a video, not a still frame. Are you seeing a video? Thanks!

[contactdwc]

I'm having the same issue, changed to code two weeks ago and it worked, but within the last couple days the video has stopped loading again.

please help, my page is wcleatherworks.com 

thank you

[Visely-Team]

@contactdwc change the following snippet in the assets/theme.js.liquid :

  function getVideoOptions(evt) {
    return videos[evt.target.l.id];
  }

so it reads:

function getVideoOptions(evt) {
    return videos[evt.target.f.id];
  }

[contactdwc]

thank you for the quick reply, i changed the code and its still not
working. The folder im in just says theme.js rather than theme.js.liquid
does that have anything to do with it? i cant find theme.js.liquid Any
other suggestions? thank you

[Visely-Team]

@contactdwcare you doing this through Theme Code editor? I don't see the changes on your live store.

[contactdwc]

I am in the theme code editor, but i don't have theme.js.iquid. just theme.js and theme.liquid.

i found the line you told me to edit in theme.js but the line was already showing what you told me to change it to

[Visely-Team]

@contactdwc that is odd. Are you sure you are changing this for the live theme? Attaching a screenshot with the code that I see live. As you can see the code is still having .l. instead of .f.

[contactdwc]

well that was weird, went in this morning and switched the l. to f. and it worked

thanks very much for your help!

[mariekedegoeij]

Hi Sergiu,

I’m looking for two things on my Shopify on www.depridoeboek.nl

Is this something you can help me with?

1. Change the newsletter sign up in debut theme home page - so you also have to put in your first name. (Now its only e-mailadres)

2. I want people to be able to gift a product, to leave a little note (so that the receiver knows who sent it). (I have installed notes at the cart, but I need a note at checkout - as I have 1 product (book), people don’t go to cart, they go to ‘buy directly’ and checkout instantly.

I thought then people can put their own address as invoice address, and the receivers address as shipment address
If you see any other easy options for people to ship the book to someone else, let me know!

Thank you!

Best, Marieke

[ToniHannan]

Hi

This is the code from my Video liquid theme in Debut Theme

{%- case section.settings.height -%}
{%- when 'small' -%}
{%- assign mobile_height = 175 -%}
{%- assign desktop_height = 475 -%}
{%- when 'medium' -%}
{%- assign mobile_height = 270 -%}
{%- assign desktop_height = 650 -%}
{%- when 'large' -%}
{%- assign mobile_height = 375 -%}
{%- assign desktop_height = 775 -%}
{%- endcase -%}

{%- if section.settings.image == blank -%}
{% style %}
@media screen and (max-width: 749px) {
.video-section-wrapper--{{ section.id }} .video__image {
opacity: 0;
}
}
{% endstyle %}
{%- endif -%}
<div class="page-width" data-section-id="{{ section.id }}" data-section-type="video-section">
{%- if section.settings.video_link != blank -%}
<div class="video-section-wrapper
video-section-wrapper--{{ section.settings.height }}
video-section-wrapper--min-height
{% if section.settings.style == 'background' %} video-background-wrapper
{% unless section.settings.show_overlay %} video-background-wrapper--no-overlay{% endunless %}
{% endif %}
video-section-wrapper--{{ section.id }}"
data-desktop-height="{{ desktop_height }}"
data-mobile-height="{{ mobile_height }}">
{%- if section.settings.show_overlay -%}<div class="video__overlay"></div>{%- endif -%}
<button type="button"
class="text-link video-control__close-wrapper
{% if section.settings.style == 'background' %} video-control__close-background{% endif %}"
data-controls="Video-{{ section.id }}">
<span class="video-control video-control__close">
{% include 'icon-close' %}
<span class="icon__fallback-text">{{ 'sections.video.close' | t: video_title: '[video_title]' }}</span>
</span>
</button>
{%- if section.settings.video_link != blank -%}
<div id="Video-{{ section.id }}"
class="video{% if section.settings.style == 'background' %} video--background{% endif %}
video--{{ section.settings.style }}"
data-id="{{ section.settings.video_link.id }}"
data-type="{{ section.settings.style }}"></div>
{%- endif -%}

{%- if section.settings.image == blank -%}
<div class="video__image js">
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
{%- else -%}
<div class="video__image box ratio-container lazyload js"
data-bgset="{% include 'bgset', image: section.settings.image %}"
data-sizes="auto"
data-parent-fit="contain"
style="background-position: {{ section.settings.image_position }};
background-image: url('{{ section.settings.image | img_url: '300x300' }}');">
</div>
{%- endif -%}

<noscript>
<div class="video__image"{% if section.settings.image %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: {{ section.settings.image_position }};"{% endif %}>
{%- if section.settings.image == blank -%}
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
</div>
</noscript>

<div class="video__text-content text-center">
<div class="page-width">
{%- unless section.settings.video_title == blank -%}
<h2 class="h1 mega-title video__title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">
{{ section.settings.video_title | escape }}
</h2>
{%- endunless -%}

{%- unless section.settings.style == 'background' -%}
<div class="video-control__play-wrapper{% if section.settings.video_title != blank %} video-control__play-wrapper--with-text{% endif %}">
{%- if section.settings.video_link != blank -%}
<div class="video-play-loader"></div>
{%- endif -%}
<button type="button" class="btn video-control video-control__play" data-controls="Video-{{ section.id }}">
{% include 'icon-play' %}
<span class="icon__fallback-text">{{ 'sections.video.play' | t: video_title: '[video_title]' }}</span>
</button>
</div>
{%- endunless -%}
</div>
</div>

<div class="video-control__play-wrapper-mobile">
{%- if section.settings.video_link != blank -%}
<div class="video-play-loader"></div>
{%- endif -%}
<button type="button" class="btn video-control video-control__play" data-controls="Video-{{ section.id }}">
{% include 'icon-play' %}
<span class="icon__fallback-text">{{ 'sections.video.play' | t: video_title: '[video_title]' }}</span>
</button>
</div>

<button type="button" class="video__pause{% unless section.settings.style == 'background' %} visually-hidden" tabindex="-1{% endunless %}" data-id="{{ section.id }}" aria-live="polite" aria-pressed="false" data-controls="Video-{{ section.id }}">
<span class="video__pause-stop">
{% include 'icon-pause' %}
<span class="icon__fallback-text">{{ 'sections.video.pause' | t: video_title: '[video_title]' }}</span>
</span>
<span class="video__pause-resume">
{% include 'icon-play' %}
<span class="icon__fallback-text">{{ 'sections.video.resume' | t: video_title: '[video_title]' }}</span>
</span>
</button>
</div>
{%- else -%}
<div class="placeholder-noblocks">
{{ 'homepage.onboarding.no_content' | t }}
</div>
{%- endif -%}
</div>

{% schema %}
{
"name": {
"da": "Video",
"de": "Video",
"en": "Video",
"es": "Video",
"fi": "Video",
"fr": "Vidéo",
"hi": "वीडियो",
"it": "Video",
"ja": "動画",
"ko": "동영상",
"ms": "Video",
"nb": "Video",
"nl": "Video",
"pt-BR": "Vídeo",
"pt-PT": "Vídeo",
"sv": "Video",
"th": "วิดีโอ",
"zh-CN": "视频",
"zh-TW": "影片"
},
"class": "index-section video-section",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"da": "Coverbillede",
"de": "Titelbild",
"en": "Cover image",
"es": "Imagen de portada",
"fi": "Kansikuva",
"fr": "Image de couverture",
"hi": "कवर इमेज",
"it": "Immagine di copertina",
"ja": "表紙画像",
"ko": "커버 이미지",
"ms": "Kulit imej",
"nb": "Forsidebilde",
"nl": "Coverafbeelding",
"pt-BR": "Imagem de capa",
"pt-PT": "Imagem de capa",
"sv": "Omslagsbild",
"th": "รูปภาพหน้าปก",
"zh-CN": "封面图片",
"zh-TW": "封面圖片"
},
"info": {
"da": "Vises altid på mobilenheder",
"de": "Wird immer auf Mobilgeräten angezeigt",
"en": "Always shown on mobile devices",
"es": "Mostrar siempre dispositivos móviles",
"fi": "Näytetään aina mobiililaitteissa",
"fr": "S'affiche toujours sur les appareils mobiles",
"hi": "हमेशा मोबाइल उपकरणों पर दिखाया जाता है",
"it": "Sempre visualizzata sui dispositivi mobili",
"ja": "常にモバイルデバイスに表示",
"ko": "모바일 장치에 항상 표시됨",
"ms": "Sentiasa ditunjukkan pada peranti mudah alih",
"nb": "Vises alltid på mobilenheter",
"nl": "Altijd weergeven op mobiele apparaten",
"pt-BR": "Sempre mostrado em dispositivos móveis",
"pt-PT": "Sempre mostrado em dispositivos móveis",
"sv": "Visas alltid på mobila enheter",
"th": "แสดงบนอุปกรณ์มือถือเสมอ",
"zh-CN": "始终在移动设备上显示",
"zh-TW": "一律在行動裝置上顯示"
}
},
{
"type": "select",
"id": "image_position",
"label": {
"da": "Justering af billede",
"de": "Fotoausrichtung",
"en": "Image alignment",
"es": "Alineación de imagen",
"fi": "Kuvan tasaus",
"fr": "Alignement de l'image",
"hi": "इमेज पंक्तिबद्ध करना",
"it": "Allineamento immagine",
"ja": "画像アラインメント",
"ko": "이미지 정렬",
"ms": "Penjajaran imej",
"nb": "Bildejustering",
"nl": "Afbeelding uitlijnen",
"pt-BR": "Alinhamento da imagem",
"pt-PT": "Alinhamento da imagem",
"sv": "Bildjustering",
"th": "การจัดวางรูปภาพ",
"zh-CN": "图片对齐方式",
"zh-TW": "圖片對齊"
},
"default": "center center",
"options": [
{
"label": {
"da": "Øverst til venstre",
"de": "Oben links",
"en": "Top left",
"es": "Superior izquierda",
"fi": "Ylhäällä vasemmalla",
"fr": "En haut à gauche",
"hi": "शीर्ष पर बाईं ओर",
"it": "In alto a sinistra",
"ja": "左上",
"ko": "왼쪽 상단",
"ms": "Kiri atas",
"nb": "Øverst til venstre",
"nl": "Linksboven",
"pt-BR": "Superior esquerdo",
"pt-PT": "Canto superior esquerdo",
"sv": "Överst till vänster",
"th": "ซ้ายบน",
"zh-CN": "左上方",
"zh-TW": "左上角"
},
"value": "left top"
},
{
"label": {
"da": "Øverst i midten",
"de": "Oben Mitte",
"en": "Top center",
"es": "Superior centrada",
"fi": "Keskellä ylhäällä",
"fr": "En haut au centre",
"hi": "शीर्ष केंद्र",
"it": "In alto al centro",
"ja": "中央上",
"ko": "맨 위 중간",
"ms": "Tengah-tengah atas",
"nb": "Toppsentrert",
"nl": "Midden boven",
"pt-BR": "Superior centro",
"pt-PT": "Superior centro",
"sv": "Längst upp i mitten",
"th": "กลางบน",
"zh-CN": "顶部居中",
"zh-TW": "中央上方"
},
"value": "center top"
},
{
"label": {
"da": "Øverst til højre",
"de": "Oben rechts",
"en": "Top right",
"es": "Superior derecha",
"fi": "Ylhäällä oikealla",
"fr": "En haut à droite",
"hi": "शीर्ष पर दाईं ओर",
"it": "In alto a destra",
"ja": "右上",
"ko": "오른쪽 상단",
"ms": "Kanan atas",
"nb": "Øverst til høyre",
"nl": "Rechtsboven",
"pt-BR": "Superior direito",
"pt-PT": "Canto superior direito",
"sv": "Överst till höger",
"th": "ขวาบน",
"zh-CN": "右上方",
"zh-TW": "右上角"
},
"value": "right top"
},
{
"label": {
"da": "Midt på til venstre",
"de": "Mitte links",
"en": "Middle left",
"es": "Al medio a la izquierda",
"fi": "Keskellä vasemmalla",
"fr": "Au milieu à gauche",
"hi": "मध्य में बाईं ओर",
"it": "Nel mezzo a sinistra",
"ja": "中央左",
"ko": "왼쪽 중간",
"ms": "Kiri tengah",
"nb": "Midt til venstre",
"nl": "Midden links",
"pt-BR": "Meio esquerdo",
"pt-PT": "Intermédio à esquerda",
"sv": "Mitten till vänster",
"th": "ซ้ายกลาง",
"zh-CN": "中间居左",
"zh-TW": "中央左方"
},
"value": "left center"
},
{
"label": {
"da": "Midt på centreret",
"de": "Mitte mittig",
"en": "Middle center",
"es": "Al medio centrada",
"fi": "Keskellä keskellä",
"fr": "Centrée au milieu",
"hi": "मध्य केंद्र",
"it": "In mezzo",
"ja": "中央中",
"ko": "가운데 중간",
"ms": "Tengah-tengah",
"nb": "Midt i senter",
"nl": "Midden centrum",
"pt-BR": "Meio centro",
"pt-PT": "Intermédio ao centro",
"sv": "Mitten centrerat",
"th": "กึ่งกลาง",
"zh-CN": "中间居中",
"zh-TW": "正中央"
},
"value": "center center"
},
{
"label": {
"da": "Midt på til højre",
"de": "Mitte rechts",
"en": "Middle right",
"es": "Al medio a la derecha",
"fi": "Keskellä oikealla",
"fr": "Au milieu à droite",
"hi": "मध्य में दाईं ओर",
"it": "Nel mezzo a destra",
"ja": "中央右",
"ko": "오른쪽 중간",
"ms": "Kanan tengah",
"nb": "Midt til høyre",
"nl": "Midden rechts",
"pt-BR": "Meio direito",
"pt-PT": "Intermédio à direita",
"sv": "Mitten till höger",
"th": "ขวากลาง",
"zh-CN": "中间居右",
"zh-TW": "中央右方"
},
"value": "right center"
},
{
"label": {
"da": "Nederst til venstre",
"de": "Unten links",
"en": "Bottom left",
"es": "Inferior izquierda",
"fi": "Alhaalla vasemmalla",
"fr": "En bas à gauche",
"hi": "सबसे नीचे बाईं ओर",
"it": "In basso a sinistra",
"ja": "左下",
"ko": "왼쪽 하단",
"ms": "Kiri bawah",
"nb": "Nederst til venstre",
"nl": "Linksonder",
"pt-BR": "Inferior esquerdo",
"pt-PT": "Canto inferior esquerdo",
"sv": "Nere till vänster",
"th": "ซ้ายล่าง",
"zh-CN": "左下方",
"zh-TW": "左下角"
},
"value": "left bottom"
},
{
"label": {
"da": "Nederst i midten",
"de": "Unten mittig",
"en": "Bottom center",
"es": "Inferior centrada",
"fi": "Keskellä alhaalla",
"fr": "En bas au centre",
"hi": "निचला केंद्र",
"it": "In basso al centro",
"ja": "中央下",
"ko": "맨아래 중간",
"ms": "Tengah bawah",
"nb": "Bunnsentrert",
"nl": "Midden onder",
"pt-BR": "Inferior centro",
"pt-PT": "Inferior centro",
"sv": "Längst ner i mitten",
"th": "กลางล่าง",
"zh-CN": "底部居中",
"zh-TW": "中央下方"
},
"value": "center bottom"
},
{
"label": {
"da": "Nederst til højre",
"de": "Unten rechts",
"en": "Bottom right",
"es": "Inferior derecha",
"fi": "Alhaalla oikealla",
"fr": "En bas à droite",
"hi": "सबसे नीचे दाईं ओर",
"it": "In basso a destra",
"ja": "右下",
"ko": "오른쪽 아래",
"ms": "Kanan bawah",
"nb": "Nederst til høyre",
"nl": "Rechtsonder",
"pt-BR": "Inferior direito",
"pt-PT": "Canto inferior direito",
"sv": "Nere till höger",
"th": "ขวาล่าง",
"zh-CN": "右下方",
"zh-TW": "右下角"
},
"value": "right bottom"
}
]
},
{
"type": "video_url",
"id": "video_link",
"label": {
"da": "Videolink",
"de": "Video-Link",
"en": "Video link",
"es": "Enlace de video",
"fi": "Videolinkki",
"fr": "Lien de la vidéo",
"hi": "वीडियो लिंक",
"it": "Link video",
"ja": "ビデオリンク",
"ko": "동영상 링크",
"ms": "Pautan video",
"nb": "Videokobling",
"nl": "Videolink",
"pt-BR": "Link do vídeo",
"pt-PT": "Ligação do vídeo",
"sv": "Videolänk",
"th": "ลิงก์วิดีโอ",
"zh-CN": "视频链接",
"zh-TW": "影片連結"
},
"accept": [
"youtube"
],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc"
},
{
"type": "checkbox",
"id": "show_overlay",
"label": {
"da": "Vis overlejring",
"de": "Überlagerung zeigen",
"en": "Show overlay",
"es": "Mostrar superposición",
"fi": "Näytä peittokuva",
"fr": "Afficher la superposition",
"hi": "ओवरले दिखाएं",
"it": "Mostra sovrapposizione",
"ja": "オーバーレイを表示する",
"ko": "오버레이 표시",
"ms": "Tunjukkan tindanan",
"nb": "Vis overlegg",
"nl": "Overlay weergeven",
"pt-BR": "Exibir sobreposição",
"pt-PT": "Mostrar sobreposição",
"sv": "Visa överlagring",
"th": "แสดงการวางซ้อน",
"zh-CN": "显示叠加",
"zh-TW": "顯示疊加層"
},
"default": true
},
{
"type": "select",
"id": "style",
"label": {
"da": "Stil",
"de": "Stil",
"en": "Style",
"es": "Estilo",
"fi": "Tyyli",
"fr": "Style",
"hi": "अंदाज",
"it": "Stile",
"ja": "スタイル",
"ko": "스타일",
"ms": "Gaya",
"nb": "Stil",
"nl": "Stijl",
"pt-BR": "Estilo",
"pt-PT": "Estilo",
"sv": "Stil",
"th": "สไตล์",
"zh-CN": "样式",
"zh-TW": "樣式"
},
"default": "image_with_play",
"options": [
{
"label": {
"da": "Billede med afspilningsknap",
"de": "Foto mit Play Button",
"en": "Image with play button",
"es": "Imagen con el botón de reproducir",
"fi": "Kuva jossa toistopainike",
"fr": "Image avec bouton de lecture",
"hi": "प्ले बटन के साथ इमेज",
"it": "Immagine con pulsante play",
"ja": "再生ボタン付き画像",
"ko": "재생 버튼이 있는 이미지",
"ms": "Imej dengan butang main",
"nb": "Bilde med avspillingsknapp",
"nl": "Afbeelding met knop afspelen",
"pt-BR": "Imagem com botão de reprodução",
"pt-PT": "Imagem com botão de reprodução",
"sv": "Bild med uppspelningsknapp",
"th": "รูปภาพพร้อมปุ่มเล่น",
"zh-CN": "带播放按钮的图片",
"zh-TW": "附播放按鈕的圖片"
},
"value": "image_with_play"
},
{
"label": {
"da": "Baggrundsvideo",
"de": "Hintergrund-Video",
"en": "Background video",
"es": "Video de fondo",
"fi": "Taustavideo",
"fr": "Vidéo d'arrière-plan",
"hi": "पृष्ठभूमि वीडियो",
"it": "Video in background",
"ja": "背景ビデオ",
"ko": "배경 동영상",
"ms": "Video latar belakang",
"nb": "Bakgrunnsvideo",
"nl": "Achtergrondvideo",
"pt-BR": "Vídeo de fundo",
"pt-PT": "Vídeo de fundo",
"sv": "Bakgrundsvideo",
"th": "วิดีโอพื้นหลัง",
"zh-CN": "背景视频",
"zh-TW": "背景影片"
},
"value": "background"
}
]
},
{
"type": "select",
"id": "height",
"label": {
"da": "Videohøjde",
"de": "Videohöhe",
"en": "Video height",
"es": "Altura del video",
"fi": "Videon korkeus",
"fr": "Hauteur de la vidéo",
"hi": "वीडियो ऊंचाई",
"it": "Altezza video",
"ja": "ビデオの高さ",
"ko": "동영상 높이",
"ms": "Ketinggian video",
"nb": "Videohøyde",
"nl": "Videohoogte",
"pt-BR": "Altura do vídeo",
"pt-PT": "Altura do vídeo",
"sv": "Bildhöjd",
"th": "ความสูงของวิดีโอ",
"zh-CN": "视频高度",
"zh-TW": "影片高度"
},
"default": "medium",
"options": [
{
"label": {
"da": "Lille",
"de": "Klein",
"en": "Small",
"es": "Pequeña",
"fi": "Pieni",
"fr": "Petit",
"hi": "छोटा",
"it": "Piccolo",
"ja": "スモール",
"ko": "스몰",
"ms": "Kecil",
"nb": "Liten",
"nl": "Klein",
"pt-BR": "Pequeno",
"pt-PT": "Pequeno",
"sv": "Liten",
"th": "เล็ก",
"zh-CN": "小",
"zh-TW": "小型"
},
"value": "small"
},
{
"label": {
"da": "Medium",
"de": "Mittel",
"en": "Medium",
"es": "Mediana",
"fi": "Keskisuuri",
"fr": "Moyen",
"hi": "मध्यम",
"it": "Medio",
"ja": "中",
"ko": "보통",
"ms": "Sederhana",
"nb": "Middels",
"nl": "Gemiddeld",
"pt-BR": "Médio",
"pt-PT": "Médio",
"sv": "Medium",
"th": "ปานกลาง",
"zh-CN": "中等",
"zh-TW": "中等"
},
"value": "medium"
},
{
"label": {
"da": "Stor",
"de": "Groß",
"en": "Large",
"es": "Larga",
"fi": "Suuri",
"fr": "Grand",
"hi": "बड़ा",
"it": "Grande",
"ja": "ラージ",
"ko": "라지",
"ms": "Besar",
"nb": "Stor",
"nl": "Groot",
"pt-BR": "Grande",
"pt-PT": "Grande",
"sv": "Stor",
"th": "ใหญ่",
"zh-CN": "大",
"zh-TW": "大型"
},
"value": "large"
}
]
},
{
"type": "text",
"id": "video_title",
"label": {
"da": "Overskrift",
"de": "Überschrift",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "En-tête",
"hi": "शीर्षक",
"it": "Heading",
"ja": "見出し",
"ko": "제목",
"ms": "Tajuk",
"nb": "Overskrift",
"nl": "Kop",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"zh-CN": "标题",
"zh-TW": "標題"
}
},
{
"type": "select",
"id": "text_size",
"label": {
"da": "Tekststørrelse",
"de": "Textgröße",
"en": "Text size",
"es": "Tamaño del texto",
"fi": "Tekstin koko",
"fr": "Taille du texte",
"hi": "टेक्स्ट आकार",
"it": "Dimensione testo",
"ja": "文字サイズ",
"ko": "텍스트 사이즈",
"ms": "Saiz teks",
"nb": "Tekststørrelse",
"nl": "Tekengrootte",
"pt-BR": "Tamanho do texto",
"pt-PT": "Tamanho do texto",
"sv": "Textstorlek",
"th": "ขนาดตัวอักษร",
"zh-CN": "文本大小",
"zh-TW": "文字尺寸"
},
"default": "medium",
"options": [
{
"label": {
"da": "Medium",
"de": "Mittel",
"en": "Medium",
"es": "Mediano",
"fi": "Keskisuuri",
"fr": "Moyenne",
"hi": "मध्यम",
"it": "Medio",
"ja": "中",
"ko": "보통",
"ms": "Sederhana",
"nb": "Middels",
"nl": "Gemiddeld",
"pt-BR": "Médio",
"pt-PT": "Intermédio",
"sv": "Medium",
"th": "ปานกลาง",
"zh-CN": "中等",
"zh-TW": "中等"
},
"value": "medium"
},
{
"label": {
"da": "Stor",
"de": "Groß",
"en": "Large",
"es": "Grande",
"fi": "Suuri",
"fr": "Grande",
"hi": "बड़ा",
"it": "Grande",
"ja": "大",
"ko": "라지",
"ms": "Besar",
"nb": "Stor",
"nl": "Groot",
"pt-BR": "Grande",
"pt-PT": "Grande",
"sv": "Stor",
"th": "ใหญ่",
"zh-CN": "大",
"zh-TW": "大型"
},
"value": "large"
}
]
}
],
"presets": [
{
"name": {
"da": "Video",
"de": "Video",
"en": "Video",
"es": "Video",
"fi": "Video",
"fr": "Vidéo",
"hi": "वीडियो",
"it": "Video",
"ja": "動画",
"ko": "동영상",
"ms": "Video",
"nb": "Video",
"nl": "Video",
"pt-BR": "Vídeo",
"pt-PT": "Vídeo",
"sv": "Video",
"th": "วิดีโอ",
"zh-CN": "视频",
"zh-TW": "影片"
},
"category": {
"da": "Video",
"de": "Video",
"en": "Video",
"es": "Video",
"fi": "Video",
"fr": "Vidéo",
"hi": "वीडियो",
"it": "Video",
"ja": "動画",
"ko": "동영상",
"ms": "Video",
"nb": "Video",
"nl": "Video",
"pt-BR": "Vídeo",
"pt-PT": "Vídeo",
"sv": "Video",
"th": "วิดีโอ",
"zh-CN": "视频",
"zh-TW": "影片"
},
"settings": {
"image_position": "center center",
"show_overlay": true,
"style": "image_with_play",
"height": "medium"
}
}
]
}
{% endschema %}

[ToniHannan]

Hi

this is the liquid html code from my debut themed website

{%- case section.settings.height -%}
{%- when 'small' -%}
{%- assign mobile_height = 175 -%}
{%- assign desktop_height = 475 -%}
{%- when 'medium' -%}
{%- assign mobile_height = 270 -%}
{%- assign desktop_height = 650 -%}
{%- when 'large' -%}
{%- assign mobile_height = 375 -%}
{%- assign desktop_height = 775 -%}
{%- endcase -%}

{%- if section.settings.image == blank -%}
{% style %}
@media screen and (max-width: 749px) {
.video-section-wrapper--{{ section.id }} .video__image {
opacity: 0;
}
}
{% endstyle %}
{%- endif -%}
<div class="page-width" data-section-id="{{ section.id }}" data-section-type="video-section">
{%- if section.settings.video_link != blank -%}
<div class="video-section-wrapper
video-section-wrapper--{{ section.settings.height }}
video-section-wrapper--min-height
{% if section.settings.style == 'background' %} video-background-wrapper
{% unless section.settings.show_overlay %} video-background-wrapper--no-overlay{% endunless %}
{% endif %}
video-section-wrapper--{{ section.id }}"
data-desktop-height="{{ desktop_height }}"
data-mobile-height="{{ mobile_height }}">
{%- if section.settings.show_overlay -%}<div class="video__overlay"></div>{%- endif -%}
<button type="button"
class="text-link video-control__close-wrapper
{% if section.settings.style == 'background' %} video-control__close-background{% endif %}"
data-controls="Video-{{ section.id }}">
<span class="video-control video-control__close">
{% include 'icon-close' %}
<span class="icon__fallback-text">{{ 'sections.video.close' | t: video_title: '[video_title]' }}</span>
</span>
</button>
{%- if section.settings.video_link != blank -%}
<div id="Video-{{ section.id }}"
class="video{% if section.settings.style == 'background' %} video--background{% endif %}
video--{{ section.settings.style }}"
data-id="{{ section.settings.video_link.id }}"
data-type="{{ section.settings.style }}"></div>
{%- endif -%}

{%- if section.settings.image == blank -%}
<div class="video__image js">
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
{%- else -%}
<div class="video__image box ratio-container lazyload js"
data-bgset="{% include 'bgset', image: section.settings.image %}"
data-sizes="auto"
data-parent-fit="contain"
style="background-position: {{ section.settings.image_position }};
background-image: url('{{ section.settings.image | img_url: '300x300' }}');">
</div>
{%- endif -%}

<noscript>
<div class="video__image"{% if section.settings.image %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: {{ section.settings.image_position }};"{% endif %}>
{%- if section.settings.image == blank -%}
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
</div>
</noscript>

<div class="video__text-content text-center">
<div class="page-width">
{%- unless section.settings.video_title == blank -%}
<h2 class="h1 mega-title video__title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">
{{ section.settings.video_title | escape }}
</h2>
{%- endunless -%}

{%- unless section.settings.style == 'background' -%}
<div class="video-control__play-wrapper{% if section.settings.video_title != blank %} video-control__play-wrapper--with-text{% endif %}">
{%- if section.settings.video_link != blank -%}
<div class="video-play-loader"></div>
{%- endif -%}
<button type="button" class="btn video-control video-control__play" data-controls="Video-{{ section.id }}">
{% include 'icon-play' %}
<span class="icon__fallback-text">{{ 'sections.video.play' | t: video_title: '[video_title]' }}</span>
</button>
</div>
{%- endunless -%}
</div>
</div>

<div class="video-control__play-wrapper-mobile">
{%- if section.settings.video_link != blank -%}
<div class="video-play-loader"></div>
{%- endif -%}
<button type="button" class="btn video-control video-control__play" data-controls="Video-{{ section.id }}">
{% include 'icon-play' %}
<span class="icon__fallback-text">{{ 'sections.video.play' | t: video_title: '[video_title]' }}</span>
</button>
</div>

<button type="button" class="video__pause{% unless section.settings.style == 'background' %} visually-hidden" tabindex="-1{% endunless %}" data-id="{{ section.id }}" aria-live="polite" aria-pressed="false" data-controls="Video-{{ section.id }}">
<span class="video__pause-stop">
{% include 'icon-pause' %}
<span class="icon__fallback-text">{{ 'sections.video.pause' | t: video_title: '[video_title]' }}</span>
</span>
<span class="video__pause-resume">
{% include 'icon-play' %}
<span class="icon__fallback-text">{{ 'sections.video.resume' | t: video_title: '[video_title]' }}</span>
</span>
</button>
</div>
{%- else -%}
<div class="placeholder-noblocks">
{{ 'homepage.onboarding.no_content' | t }}
</div>
{%- endif -%}
</div>

{% schema %}
{
"name": {
"da": "Video",
"de": "Video",
"en": "Video",
"es": "Video",
"fi": "Video",
"fr": "Vidéo",
"hi": "वीडियो",
"it": "Video",
"ja": "動画",
"ko": "동영상",
"ms": "Video",
"nb": "Video",
"nl": "Video",
"pt-BR": "Vídeo",
"pt-PT": "Vídeo",
"sv": "Video",
"th": "วิดีโอ",
"zh-CN": "视频",
"zh-TW": "影片"
},
"class": "index-section video-section",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"da": "Coverbillede",
"de": "Titelbild",
"en": "Cover image",
"es": "Imagen de portada",
"fi": "Kansikuva",
"fr": "Image de couverture",
"hi": "कवर इमेज",
"it": "Immagine di copertina",
"ja": "表紙画像",
"ko": "커버 이미지",
"ms": "Kulit imej",
"nb": "Forsidebilde",
"nl": "Coverafbeelding",
"pt-BR": "Imagem de capa",
"pt-PT": "Imagem de capa",
"sv": "Omslagsbild",
"th": "รูปภาพหน้าปก",
"zh-CN": "封面图片",
"zh-TW": "封面圖片"
},
"info": {
"da": "Vises altid på mobilenheder",
"de": "Wird immer auf Mobilgeräten angezeigt",
"en": "Always shown on mobile devices",
"es": "Mostrar siempre dispositivos móviles",
"fi": "Näytetään aina mobiililaitteissa",
"fr": "S'affiche toujours sur les appareils mobiles",
"hi": "हमेशा मोबाइल उपकरणों पर दिखाया जाता है",
"it": "Sempre visualizzata sui dispositivi mobili",
"ja": "常にモバイルデバイスに表示",
"ko": "모바일 장치에 항상 표시됨",
"ms": "Sentiasa ditunjukkan pada peranti mudah alih",
"nb": "Vises alltid på mobilenheter",
"nl": "Altijd weergeven op mobiele apparaten",
"pt-BR": "Sempre mostrado em dispositivos móveis",
"pt-PT": "Sempre mostrado em dispositivos móveis",
"sv": "Visas alltid på mobila enheter",
"th": "แสดงบนอุปกรณ์มือถือเสมอ",
"zh-CN": "始终在移动设备上显示",
"zh-TW": "一律在行動裝置上顯示"
}
},
{
"type": "select",
"id": "image_position",
"label": {
"da": "Justering af billede",
"de": "Fotoausrichtung",
"en": "Image alignment",
"es": "Alineación de imagen",
"fi": "Kuvan tasaus",
"fr": "Alignement de l'image",
"hi": "इमेज पंक्तिबद्ध करना",
"it": "Allineamento immagine",
"ja": "画像アラインメント",
"ko": "이미지 정렬",
"ms": "Penjajaran imej",
"nb": "Bildejustering",
"nl": "Afbeelding uitlijnen",
"pt-BR": "Alinhamento da imagem",
"pt-PT": "Alinhamento da imagem",
"sv": "Bildjustering",
"th": "การจัดวางรูปภาพ",
"zh-CN": "图片对齐方式",
"zh-TW": "圖片對齊"
},
"default": "center center",
"options": [
{
"label": {
"da": "Øverst til venstre",
"de": "Oben links",
"en": "Top left",
"es": "Superior izquierda",
"fi": "Ylhäällä vasemmalla",
"fr": "En haut à gauche",
"hi": "शीर्ष पर बाईं ओर",
"it": "In alto a sinistra",
"ja": "左上",
"ko": "왼쪽 상단",
"ms": "Kiri atas",
"nb": "Øverst til venstre",
"nl": "Linksboven",
"pt-BR": "Superior esquerdo",
"pt-PT": "Canto superior esquerdo",
"sv": "Överst till vänster",
"th": "ซ้ายบน",
"zh-CN": "左上方",
"zh-TW": "左上角"
},
"value": "left top"
},
{
"label": {
"da": "Øverst i midten",
"de": "Oben Mitte",
"en": "Top center",
"es": "Superior centrada",
"fi": "Keskellä ylhäällä",
"fr": "En haut au centre",
"hi": "शीर्ष केंद्र",
"it": "In alto al centro",
"ja": "中央上",
"ko": "맨 위 중간",
"ms": "Tengah-tengah atas",
"nb": "Toppsentrert",
"nl": "Midden boven",
"pt-BR": "Superior centro",
"pt-PT": "Superior centro",
"sv": "Längst upp i mitten",
"th": "กลางบน",
"zh-CN": "顶部居中",
"zh-TW": "中央上方"
},
"value": "center top"
},
{
"label": {
"da": "Øverst til højre",
"de": "Oben rechts",
"en": "Top right",
"es": "Superior derecha",
"fi": "Ylhäällä oikealla",
"fr": "En haut à droite",
"hi": "शीर्ष पर दाईं ओर",
"it": "In alto a destra",
"ja": "右上",
"ko": "오른쪽 상단",
"ms": "Kanan atas",
"nb": "Øverst til høyre",
"nl": "Rechtsboven",
"pt-BR": "Superior direito",
"pt-PT": "Canto superior direito",
"sv": "Överst till höger",
"th": "ขวาบน",
"zh-CN": "右上方",
"zh-TW": "右上角"
},
"value": "right top"
},
{
"label": {
"da": "Midt på til venstre",
"de": "Mitte links",
"en": "Middle left",
"es": "Al medio a la izquierda",
"fi": "Keskellä vasemmalla",
"fr": "Au milieu à gauche",
"hi": "मध्य में बाईं ओर",
"it": "Nel mezzo a sinistra",
"ja": "中央左",
"ko": "왼쪽 중간",
"ms": "Kiri tengah",
"nb": "Midt til venstre",
"nl": "Midden links",
"pt-BR": "Meio esquerdo",
"pt-PT": "Intermédio à esquerda",
"sv": "Mitten till vänster",
"th": "ซ้ายกลาง",
"zh-CN": "中间居左",
"zh-TW": "中央左方"
},
"value": "left center"
},
{
"label": {
"da": "Midt på centreret",
"de": "Mitte mittig",
"en": "Middle center",
"es": "Al medio centrada",
"fi": "Keskellä keskellä",
"fr": "Centrée au milieu",
"hi": "मध्य केंद्र",
"it": "In mezzo",
"ja": "中央中",
"ko": "가운데 중간",
"ms": "Tengah-tengah",
"nb": "Midt i senter",
"nl": "Midden centrum",
"pt-BR": "Meio centro",
"pt-PT": "Intermédio ao centro",
"sv": "Mitten centrerat",
"th": "กึ่งกลาง",
"zh-CN": "中间居中",
"zh-TW": "正中央"
},
"value": "center center"
},
{
"label": {
"da": "Midt på til højre",
"de": "Mitte rechts",
"en": "Middle right",
"es": "Al medio a la derecha",
"fi": "Keskellä oikealla",
"fr": "Au milieu à droite",
"hi": "मध्य में दाईं ओर",
"it": "Nel mezzo a destra",
"ja": "中央右",
"ko": "오른쪽 중간",
"ms": "Kanan tengah",
"nb": "Midt til høyre",
"nl": "Midden rechts",
"pt-BR": "Meio direito",
"pt-PT": "Intermédio à direita",
"sv": "Mitten till höger",
"th": "ขวากลาง",
"zh-CN": "中间居右",
"zh-TW": "中央右方"
},
"value": "right center"
},
{
"label": {
"da": "Nederst til venstre",
"de": "Unten links",
"en": "Bottom left",
"es": "Inferior izquierda",
"fi": "Alhaalla vasemmalla",
"fr": "En bas à gauche",
"hi": "सबसे नीचे बाईं ओर",
"it": "In basso a sinistra",
"ja": "左下",
"ko": "왼쪽 하단",
"ms": "Kiri bawah",
"nb": "Nederst til venstre",
"nl": "Linksonder",
"pt-BR": "Inferior esquerdo",
"pt-PT": "Canto inferior esquerdo",
"sv": "Nere till vänster",
"th": "ซ้ายล่าง",
"zh-CN": "左下方",
"zh-TW": "左下角"
},
"value": "left bottom"
},
{
"label": {
"da": "Nederst i midten",
"de": "Unten mittig",
"en": "Bottom center",
"es": "Inferior centrada",
"fi": "Keskellä alhaalla",
"fr": "En bas au centre",
"hi": "निचला केंद्र",
"it": "In basso al centro",
"ja": "中央下",
"ko": "맨아래 중간",
"ms": "Tengah bawah",
"nb": "Bunnsentrert",
"nl": "Midden onder",
"pt-BR": "Inferior centro",
"pt-PT": "Inferior centro",
"sv": "Längst ner i mitten",
"th": "กลางล่าง",
"zh-CN": "底部居中",
"zh-TW": "中央下方"
},
"value": "center bottom"
},
{
"label": {
"da": "Nederst til højre",
"de": "Unten rechts",
"en": "Bottom right",
"es": "Inferior derecha",
"fi": "Alhaalla oikealla",
"fr": "En bas à droite",
"hi": "सबसे नीचे दाईं ओर",
"it": "In basso a destra",
"ja": "右下",
"ko": "오른쪽 아래",
"ms": "Kanan bawah",
"nb": "Nederst til høyre",
"nl": "Rechtsonder",
"pt-BR": "Inferior direito",
"pt-PT": "Canto inferior direito",
"sv": "Nere till höger",
"th": "ขวาล่าง",
"zh-CN": "右下方",
"zh-TW": "右下角"
},
"value": "right bottom"
}
]
},
{
"type": "video_url",
"id": "video_link",
"label": {
"da": "Videolink",
"de": "Video-Link",
"en": "Video link",
"es": "Enlace de video",
"fi": "Videolinkki",
"fr": "Lien de la vidéo",
"hi": "वीडियो लिंक",
"it": "Link video",
"ja": "ビデオリンク",
"ko": "동영상 링크",
"ms": "Pautan video",
"nb": "Videokobling",
"nl": "Videolink",
"pt-BR": "Link do vídeo",
"pt-PT": "Ligação do vídeo",
"sv": "Videolänk",
"th": "ลิงก์วิดีโอ",
"zh-CN": "视频链接",
"zh-TW": "影片連結"
},
"accept": [
"youtube"
],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc"
},
{
"type": "checkbox",
"id": "show_overlay",
"label": {
"da": "Vis overlejring",
"de": "Überlagerung zeigen",
"en": "Show overlay",
"es": "Mostrar superposición",
"fi": "Näytä peittokuva",
"fr": "Afficher la superposition",
"hi": "ओवरले दिखाएं",
"it": "Mostra sovrapposizione",
"ja": "オーバーレイを表示する",
"ko": "오버레이 표시",
"ms": "Tunjukkan tindanan",
"nb": "Vis overlegg",
"nl": "Overlay weergeven",
"pt-BR": "Exibir sobreposição",
"pt-PT": "Mostrar sobreposição",
"sv": "Visa överlagring",
"th": "แสดงการวางซ้อน",
"zh-CN": "显示叠加",
"zh-TW": "顯示疊加層"
},
"default": true
},
{
"type": "select",
"id": "style",
"label": {
"da": "Stil",
"de": "Stil",
"en": "Style",
"es": "Estilo",
"fi": "Tyyli",
"fr": "Style",
"hi": "अंदाज",
"it": "Stile",
"ja": "スタイル",
"ko": "스타일",
"ms": "Gaya",
"nb": "Stil",
"nl": "Stijl",
"pt-BR": "Estilo",
"pt-PT": "Estilo",
"sv": "Stil",
"th": "สไตล์",
"zh-CN": "样式",
"zh-TW": "樣式"
},
"default": "image_with_play",
"options": [
{
"label": {
"da": "Billede med afspilningsknap",
"de": "Foto mit Play Button",
"en": "Image with play button",
"es": "Imagen con el botón de reproducir",
"fi": "Kuva jossa toistopainike",
"fr": "Image avec bouton de lecture",
"hi": "प्ले बटन के साथ इमेज",
"it": "Immagine con pulsante play",
"ja": "再生ボタン付き画像",
"ko": "재생 버튼이 있는 이미지",
"ms": "Imej dengan butang main",
"nb": "Bilde med avspillingsknapp",
"nl": "Afbeelding met knop afspelen",
"pt-BR": "Imagem com botão de reprodução",
"pt-PT": "Imagem com botão de reprodução",
"sv": "Bild med uppspelningsknapp",
"th": "รูปภาพพร้อมปุ่มเล่น",
"zh-CN": "带播放按钮的图片",
"zh-TW": "附播放按鈕的圖片"
},
"value": "image_with_play"
},
{
"label": {
"da": "Baggrundsvideo",
"de": "Hintergrund-Video",
"en": "Background video",
"es": "Video de fondo",
"fi": "Taustavideo",
"fr": "Vidéo d'arrière-plan",
"hi": "पृष्ठभूमि वीडियो",
"it": "Video in background",
"ja": "背景ビデオ",
"ko": "배경 동영상",
"ms": "Video latar belakang",
"nb": "Bakgrunnsvideo",
"nl": "Achtergrondvideo",
"pt-BR": "Vídeo de fundo",
"pt-PT": "Vídeo de fundo",
"sv": "Bakgrundsvideo",
"th": "วิดีโอพื้นหลัง",
"zh-CN": "背景视频",
"zh-TW": "背景影片"
},
"value": "background"
}
]
},
{
"type": "select",
"id": "height",
"label": {
"da": "Videohøjde",
"de": "Videohöhe",
"en": "Video height",
"es": "Altura del video",
"fi": "Videon korkeus",
"fr": "Hauteur de la vidéo",
"hi": "वीडियो ऊंचाई",
"it": "Altezza video",
"ja": "ビデオの高さ",
"ko": "동영상 높이",
"ms": "Ketinggian video",
"nb": "Videohøyde",
"nl": "Videohoogte",
"pt-BR": "Altura do vídeo",
"pt-PT": "Altura do vídeo",
"sv": "Bildhöjd",
"th": "ความสูงของวิดีโอ",
"zh-CN": "视频高度",
"zh-TW": "影片高度"
},
"default": "medium",
"options": [
{
"label": {
"da": "Lille",
"de": "Klein",
"en": "Small",
"es": "Pequeña",
"fi": "Pieni",
"fr": "Petit",
"hi": "छोटा",
"it": "Piccolo",
"ja": "スモール",
"ko": "스몰",
"ms": "Kecil",
"nb": "Liten",
"nl": "Klein",
"pt-BR": "Pequeno",
"pt-PT": "Pequeno",
"sv": "Liten",
"th": "เล็ก",
"zh-CN": "小",
"zh-TW": "小型"
},
"value": "small"
},
{
"label": {
"da": "Medium",
"de": "Mittel",
"en": "Medium",
"es": "Mediana",
"fi": "Keskisuuri",
"fr": "Moyen",
"hi": "मध्यम",
"it": "Medio",
"ja": "中",
"ko": "보통",
"ms": "Sederhana",
"nb": "Middels",
"nl": "Gemiddeld",
"pt-BR": "Médio",
"pt-PT": "Médio",
"sv": "Medium",
"th": "ปานกลาง",
"zh-CN": "中等",
"zh-TW": "中等"
},
"value": "medium"
},
{
"label": {
"da": "Stor",
"de": "Groß",
"en": "Large",
"es": "Larga",
"fi": "Suuri",
"fr": "Grand",
"hi": "बड़ा",
"it": "Grande",
"ja": "ラージ",
"ko": "라지",
"ms": "Besar",
"nb": "Stor",
"nl": "Groot",
"pt-BR": "Grande",
"pt-PT": "Grande",
"sv": "Stor",
"th": "ใหญ่",
"zh-CN": "大",
"zh-TW": "大型"
},
"value": "large"
}
]
},
{
"type": "text",
"id": "video_title",
"label": {
"da": "Overskrift",
"de": "Überschrift",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "En-tête",
"hi": "शीर्षक",
"it": "Heading",
"ja": "見出し",
"ko": "제목",
"ms": "Tajuk",
"nb": "Overskrift",
"nl": "Kop",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"zh-CN": "标题",
"zh-TW": "標題"
}
},
{
"type": "select",
"id": "text_size",
"label": {
"da": "Tekststørrelse",
"de": "Textgröße",
"en": "Text size",
"es": "Tamaño del texto",
"fi": "Tekstin koko",
"fr": "Taille du texte",
"hi": "टेक्स्ट आकार",
"it": "Dimensione testo",
"ja": "文字サイズ",
"ko": "텍스트 사이즈",
"ms": "Saiz teks",
"nb": "Tekststørrelse",
"nl": "Tekengrootte",
"pt-BR": "Tamanho do texto",
"pt-PT": "Tamanho do texto",
"sv": "Textstorlek",
"th": "ขนาดตัวอักษร",
"zh-CN": "文本大小",
"zh-TW": "文字尺寸"
},
"default": "medium",
"options": [
{
"label": {
"da": "Medium",
"de": "Mittel",
"en": "Medium",
"es": "Mediano",
"fi": "Keskisuuri",
"fr": "Moyenne",
"hi": "मध्यम",
"it": "Medio",
"ja": "中",
"ko": "보통",
"ms": "Sederhana",
"nb": "Middels",
"nl": "Gemiddeld",
"pt-BR": "Médio",
"pt-PT": "Intermédio",
"sv": "Medium",
"th": "ปานกลาง",
"zh-CN": "中等",
"zh-TW": "中等"
},
"value": "medium"
},
{
"label": {
"da": "Stor",
"de": "Groß",
"en": "Large",
"es": "Grande",
"fi": "Suuri",
"fr": "Grande",
"hi": "बड़ा",
"it": "Grande",
"ja": "大",
"ko": "라지",
"ms": "Besar",
"nb": "Stor",
"nl": "Groot",
"pt-BR": "Grande",
"pt-PT": "Grande",
"sv": "Stor",
"th": "ใหญ่",
"zh-CN": "大",
"zh-TW": "大型"
},
"value": "large"
}
]
}
],
"presets": [
{
"name": {
"da": "Video",
"de": "Video",
"en": "Video",
"es": "Video",
"fi": "Video",
"fr": "Vidéo",
"hi": "वीडियो",
"it": "Video",
"ja": "動画",
"ko": "동영상",
"ms": "Video",
"nb": "Video",
"nl": "Video",
"pt-BR": "Vídeo",
"pt-PT": "Vídeo",
"sv": "Video",
"th": "วิดีโอ",
"zh-CN": "视频",
"zh-TW": "影片"
},
"category": {
"da": "Video",
"de": "Video",
"en": "Video",
"es": "Video",
"fi": "Video",
"fr": "Vidéo",
"hi": "वीडियो",
"it": "Video",
"ja": "動画",
"ko": "동영상",
"ms": "Video",
"nb": "Video",
"nl": "Video",
"pt-BR": "Vídeo",
"pt-PT": "Vídeo",
"sv": "Video",
"th": "วิดีโอ",
"zh-CN": "视频",
"zh-TW": "影片"
},
"settings": {
"image_position": "center center",
"show_overlay": true,
"style": "image_with_play",
"height": "medium"
}
}
]
}
{% endschema %}

[Farooq1]

Hi I have changed the code to function getVideoOptions(evt) {
return videos[evt.target.I.id];
}

It works but after some days it stopped again can you please help

[Tejas_Nadpara]

• Please click Online Store and then Themes.
• Next, click on Actions and select Edit Code.
• After that, select the Assets file and click theme.js. 
• Search the function name "getVideoOptions", it would be like the following:

  function getVideoOptions(evt) {
    return videos[evt.target.a.id];
  }

• Replace that function with the following code:

  function getVideoOptions(evt) {
    var id = evt.target.getIframe().id;
    return videos[id];
  }

• Save the changes and reload your site. 

Cheers,

Tejas

[Tejas_Nadpara]

• Please click Online Store and then Themes.
• Next, click on Actions and select Edit Code.
• After that, select the Assets file and click theme.js. 
• Search the function name "getVideoOptions", it would be like the following:

  function getVideoOptions(evt) {
    return videos[evt.target.a.id];
  }

• Replace that function with the following code:

  function getVideoOptions(evt) {
    var id = evt.target.getIframe().id;
    return videos[id];
  }

• Save the changes and reload your site. 

Cheers,

Tejas

[Farooq1]

thanks @Tejas_Nadpara 

[HartleyEmma]

Thank you everyone for all of your suggestions and ideas. 

I tried every single post suggesting a change from the start of this thread up until to this post, and it was this suggestion that helped my custom theme.

[Nick211]

I have the same problem. my video is loading. Please help me. 

This is my URL. 

https://d-tops-engineering-supply.myshopify.com/

[Visely-Team]

@Nick211 under Theme Code editor, theme.js.liquid adjust this snippet:

  function getVideoOptions(evt) {
    return videos[evt.target.l.id];
  }

So it reads:

  function getVideoOptions(evt) {
    var id = evt.target.getIframe().id;
    return videos[id];
  }

[astroknowme]

Hi there, I have tried all the possible codes given, unfortunately none of them work for me. I am using the theme Debut. It did work for me a week ago and now its just been stuck on loading.  Here is my URL https://astroknowme.myshopify.com

---

[Tejas_Nadpara]

@astroknowme 

I see you placed the code incorrect place. Send me your theme.js file code on mail, details given below.

I will make it correct and resend it to you again.

Thank you,

Tejas

[astroknowme]

 It couldnt let me send the entire code, is this ok?
}

$target
.closest(selectors.imageWithPlaceholderWrapper)
.find(selectors.imagePlaceholder)
.addClass(classes.hidden);
});

// When the theme loads, lazysizes might load images before the "lazyloaded"
// event listener has been attached. When this happens, the following function
// hides the loading placeholders.
function onLoadHideLazysizesAnimation() {
$(selectors.image + '.lazyloaded')
.closest(selectors.imageWithPlaceholderWrapper)
.find(selectors.imagePlaceholder)
.addClass(classes.hidden);
}

onLoadHideLazysizesAnimation();
$(document).one('touchstart', function() {
theme.Helpers.setTouch();
});
};

// Youtube API callback
// eslint-disable-next-line no-unused-vars
function getVideoOptions(evt) {
var id = evt.target.getIframe().id;
return videos[id];
}
theme.Video.loadVideos();
theme.ProductVideo.loadVideos(theme.ProductVideo.hosts.youtube);
}

$(theme.init);

[Tejas_Nadpara]

@astroknowme 

You can create a simple .txt file and paste the code. Send me that file on support@hexaecommerce.com

[astroknowme]

Hi did you receive my code?

[FPG]

I have tried all solutions in this thread, but my video will still not load.

WEBSITE:
https://www.feedbackgrips.com
STORE:
https://feedback-putter-grips.myshopify.com/

please help, thank you.

[FPG]

---

@FPG wrote:

I have tried all solutions in this thread, but my video will still not load.

---

Never mind. I was editing a duplicate of the them rather than the live theme. It's fixed now!

[CharlieBabble]

Hi there, my video is not loading. I have tried a.id / g.g.id / l.id and 

var id = evt.target.getIframe().id;
    return videos[id];

not working either.

Grateful for any help thanks, https://www.babbleandhemp.com

Charlie 

[mikeevans1800]

My Youtube video on my home page was working when I installed it, but now it is just buffering.  I tried to fix the code like suggested on the forums, but I am not a developer and may have screwed it up.  Can you please help?  My page goes live October 1st.  

Here is my page: https://tuf-trucks.myshopify.com/

Mike

[Visely-Team]

@mikeevans1800 your store is password protected. DM me the password if you still need help with that.