Online Store → Themes → Edit code.
2. Откройте файл image-with-text.liquid в папке sections
{
"type": "url",
"id": "video_url",
"label": "Video Url"
},
{
"type": "url",
"id": "video_image_url",
"label": "Video Image Url"
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Autoplay if no sound"
},
{
"type": "checkbox",
"id": "show_controls",
"label": "Show Controls"
},
{
"type": "checkbox",
"id": "loop_video",
"label": "Loop Video"
},
{%- elsif section.settings.video_url -%}
<video {% if section.settings.autoplay %} autoplay muted {% endif %} {% if section.settings.show_controls %} controls {% endif %} {% if section.settings.loop_video %} loop {% endif %} playsinline poster="{{ section.settings.video_image_url }}">
<source src="{{ section.settings.video_url }}" type="video/mp4">
</video>
class="image-with-text__media{% if section.settings.video_url != blank %} image-with-text__video{% endif %} image-with-text__media--{{ section.settings.height }}{% unless remove_color_classes %} gradient color-{{ section.settings.color_scheme }}{% else %} background-transparent{% endunless %}{% if section.settings.image != blank or section.settings.video_url != blank %} global-media-settings{% endif %}{% if section.settings.image != blank %} media{% elsif section.settings.video_url == blank %} image-with-text__media--placeholder placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}"
3. Откройте файл component-image-with-text.css в папке assets
В конец файла вставьте стили.
/*
Video With Text
*/
.image-with-text__video {
display: flex;
align-items: center;
}
.image-with-text__video video {
width: 100%;
}
