Video Layout Issues on Shopify DAWN Desktop View

randomstoreowne
Tourist
11 0 1

Hey community, 

 

I've created a custom video section on my Shopify site using advice from other posts. It looks great on mobile, but on desktop, the videos are cut off and don't display correctly. Also, I'd like the video to appear smaller than the Shopify default on desktop.

 

When I try to fix it, I end up with other issues, like it only working in portrait or landscape mode, the thumbnail or play button looking odd, or the video not playing at all.

 

This is the link to my store: https://dental-armor.com/

 

The first video is vertical and has 720x1272 resolution. The second one is 1920x1080. On the mobile view you can see how they are supposed to look without being cropped.

 

Below is .liquid code, and I haven't made any other changes to the base.css for this section.

 

Can anyone help?

 

 

 

{{ 'video-section.css' | asset_url | stylesheet_tag }}
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  @media screen and (min-width: 1024px) {
  .video-section {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto; /* Adjust height automatically based on the video's aspect ratio */
    position: relative; /* Maintain relative positioning */
  }

  .video-section .video-section__media {
    width: 100%; /* Full width of the container */
    max-width: 600px; /* Maximum width of the video */
    height: auto; /* Height adjusted automatically based on the aspect ratio */
    margin: auto; /* Center the video horizontally */
    position: relative; /* Relative position to the video-section */
    display: block; /* Display block to fill width of container */
    padding-bottom: 56.25%; /* Padding-bottom for 16:9 aspect ratio */
    height: 0; /* Set height to 0 to use padding for aspect ratio */
  }

  .video-section .video-section__media iframe,
  .video-section .video-section__media video {
    position: absolute; /* Absolute position within .video-section__media */
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height to fill the padding-bottom space */
  }
}


}

{%- endstyle -%}

{%- liquid
  assign video_id = section.settings.video.id | default: section.settings.video_url.id
  assign video_alt = section.settings.video.alt | default: section.settings.description
  assign alt = 'sections.video.load_video' | t: description: video_alt | escape
  assign poster = section.settings.video.preview_image | default: section.settings.cover_image

  if section.settings.video != null
    assign ratio_diff = section.settings.video.aspect_ratio | minus: poster.aspect_ratio | abs
    if ratio_diff < 0.01 and ratio_diff > 0
      assign fix_ratio = true
    endif
  endif
-%}

{%- capture sizes -%}
  {% if section.settings.full_width -%}
    100vw
  {%- else -%}
    (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px)
    calc(100vw - 10rem), 100vw
  {%- endif %}
{%- endcapture -%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="video-section isolate{% unless section.settings.full_width %} page-width{% endunless %} section-{{ section.id }}-padding">
    <div
      {% if section.settings.full_width %}
        class="page-width"
      {% endif %}
    >
      {%- unless section.settings.heading == blank -%}
        <div class="title-wrapper title-wrapper--no-top-margin{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
          <h2 class="title inline-richtext {{ section.settings.heading_size }}">{{ section.settings.heading }}</h2>
        </div>
      {%- endunless -%}
    </div>
    <noscript>
      <div
        class="video-section__media"
        {% if poster != null %}
          style="--ratio-percent: {{ 1 | divided_by: poster.aspect_ratio | times: 100 }}%;"
        {% endif %}
      >
        {%- if section.settings.video == null and section.settings.video_url != null -%}
          <a
            href="{{ section.settings.video_url }}"
            class="video-section__poster media media--transparent{% if poster == null %} video-section__placeholder{% endif %}"
          >
            {%- if poster != null -%}
              {{
                poster
                | image_url: width: 3840
                | image_tag:
                  loading: 'lazy',
                  sizes: sizes,
                  widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840',
                  alt: alt
              }}
            {%- else -%}
              {{ 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
            {%- endif -%}
          </a>
        {%- else -%}
          {{
            section.settings.video
            | video_tag: image_size: '1100x', loop: section.settings.enable_video_looping, controls: true, muted: false
          }}
        {%- endif -%}
      </div>
    </noscript>
    <deferred-media
      class="video-section__media deferred-media no-js-hidden gradient global-media-settings{% if section.settings.full_width %} global-media-settings--full-width{% endif %}{% if fix_ratio %} media-fit-cover{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
      data-media-id="{{ video_id }}"
      {% if poster != null %}
        style="--ratio-percent: {{ 1 | divided_by: poster.aspect_ratio | times: 100 }}%;"
      {% endif %}
    >
      <button
        id="Deferred-Poster-Modal-{{ video_id }}"
        class="video-section__poster media deferred-media__poster media--landscape"
        type="button"
        aria-label="{{ alt }}"
      >
        {%- if poster != null -%}
          {{
            poster
            | image_url: width: 3840
            | image_tag: loading: 'lazy', sizes: sizes, widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840', alt: alt
          }}
        {%- else -%}
          {{ 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
        {%- endif -%}
        <span class="deferred-media__poster-button motion-reduce">
          {%- render 'icon-play' -%}
        </span>
      </button>
      <template>
        {%- if section.settings.video == null and section.settings.video_url != null -%}
          {%- liquid
            assign loop = ''
            if section.settings.enable_video_looping
              assign loop = '&loop=1&playlist=' | append: video_id
            endif
          -%}
          {%- if section.settings.video_url.type == 'youtube' -%}
            <iframe
              src="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1&autoplay=1{{ loop }}"
              class="js-youtube"
              allow="autoplay; encrypted-media"
              allowfullscreen
              title="{{ section.settings.description | escape }}"
            ></iframe>
          {%- else -%}
            <iframe
              src="https://player.vimeo.com/video/{{ video_id }}?autoplay=1{{ loop }}"
              class="js-vimeo"
              allow="autoplay; encrypted-media"
              allowfullscreen
              title="{{ section.settings.description | escape }}"
            ></iframe>
          {%- endif -%}
        {%- else -%}
          {{
            section.settings.video
            | video_tag:
              image_size: '1100x',
              autoplay: true,
              loop: section.settings.enable_video_looping,
              controls: true,
              muted: false
          }}
        {%- endif -%}
      </template>
    </deferred-media>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.video.name",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "inline_richtext",
      "id": "heading",
      "default": "Video",
      "label": "t:sections.video.settings.heading.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "checkbox",
      "id": "enable_video_looping",
      "label": "t:sections.video.settings.enable_video_looping.label",
      "default": false
    },
    {
      "type": "header",
      "content": "t:sections.video.settings.header__1.content"
    },
    {
      "type": "video",
      "id": "video",
      "label": "t:sections.video.settings.video.label"
    },
    {
      "type": "header",
      "content": "t:sections.video.settings.header__2.content"
    },
    {
      "type": "paragraph",
      "content": "t:sections.video.settings.paragraph.content"
    },
    {
      "type": "video_url",
      "id": "video_url",
      "accept": ["youtube", "vimeo"],
      "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
      "label": "t:sections.video.settings.video_url.label",
      "info": "t:sections.video.settings.video_url.info"
    },
    {
      "type": "image_picker",
      "id": "cover_image",
      "label": "t:sections.video.settings.cover_image.label"
    },
    {
      "type": "text",
      "id": "description",
      "label": "t:sections.video.settings.description.label",
      "info": "t:sections.video.settings.description.info"
    },
    {
      "type": "header",
      "content": "t:sections.video.settings.header__3.content"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "t:sections.video.settings.full_width.label",
      "default": false
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "background-1"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "presets": [
    {
      "name": "t:sections.video.presets.name"
    }
  ]
}
{% endschema %}

 

 

 

Replies 2 (2)

websensepro
Shopify Partner
1014 139 147

Hello Randomstoreowne,

I'll guide you through some steps to the video layout issues you're experiencing on the desktop view

 

Here's what you can try:

 

Adjust Video Aspect Ratio(Since your videos have different resolutions, it's important to ensure that they maintain the correct aspect ratio to prevent cropping or distortion. For the vertical video (720x1272 resolution), you might want to consider adjusting the height to match the width of the video container to avoid cropping. For the horizontal video (1920x1080 resolution), ensure it fits within the container without being stretched or cropped.)

 

Add this CSS code to the base.css file at the bottom

 

 

/* Adjust video container size for desktop */
@media only screen and (min-width: 768px) {
  .your-video-container {
    max-width: 50%; /* Adjust the percentage as needed */
    margin: 0 auto; /* Center the video container */
  }
}

/* Prevent cropping of vertical video on desktop */
@media only screen and (min-width: 768px) {
  .vertical-video {
    height: auto;
    width: 100%; /* Ensure video width fills container */
  }
}

 

save changes.

Replace .your-video-container and .vertical-video with the appropriate class names used in your HTML markup.

Video Embed Code: Make sure you're using responsive video embed code that adjusts to different screen sizes. If you're using the <video> tag directly in your HTML, ensure it has the width and height attributes set appropriately.

 

 

 

PREVIEW
 
 
 
Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
randomstoreowne
Tourist
11 0 1

Thanks a lot! I will try that.