FROM CACHE - en_header
Promotion image

Re: How to make my video background appear as a large square on mobile, but stay the same on desktop

How to make my video background appear as a large square on mobile, but stay the same on desktop?

Christina6
Visitor
1 0 0
‎08-14-2024 04:37 AM

I dont have any knowledge of coding, but found this off YT and managed to add a video that autoplays on loop to my website. It looks great on desktop, but I want it to appear square on mobile as its quite small and thin on mobile. I want it to be bigger in a 1:1 ratio, so dont mind if the sides are cropped off. Can anyone help me with this? 

 

Heres the code I used for the section: 

 

{{ 'section-video-banner.css' | asset_url | stylesheet_tag }}
 
 
{%- style -%}
  #Banner-{{ section.id }}::after {
    opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
  }
{%- endstyle -%}
 
 
<div
  id="Banner-{{ section.id }}"
  class="banner video-background banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}"
>
  <div class="banner__media media video-background">  
  <video autoplay muted loop playsinline id="myVideo">
    <source src={{ section.settings.video_url }} type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
  </div>                                                                                                                   
 
  <div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width">
    <div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {%- when 'heading' -%}
            <h2
              class="banner__heading inline-richtext {{ block.settings.heading_size }}"
              {{ block.shopify_attributes }}
            >
              {{ block.settings.heading }}
            </h2>
          {%- when 'text' -%}
            <div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
              <p>{{ block.settings.text }}</p>
            </div>
          {%- when 'buttons' -%}
            <div
              class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}"
              {{ block.shopify_attributes }}
            >
              {%- if block.settings.button_label_1 != blank -%}
                <a
                  {% if block.settings.button_link_1 == blank %}
                    role="link" aria-disabled="true"
                  {% else %}
                    href="{{ block.settings.button_link_1 }}"
                  {% endif %}
                  class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"
                >
                  {{- block.settings.button_label_1 | escape -}}
                </a>
              {%- endif -%}
              {%- if block.settings.button_label_2 != blank -%}
                <a
                  {% if block.settings.button_link_2 == blank %}
                    role="link" aria-disabled="true"
                  {% else %}
                    href="{{ block.settings.button_link_2 }}"
                  {% endif %}
                  class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"
                >
                  {{- block.settings.button_label_2 | escape -}}
                </a>
              {%- endif -%}
            </div>
        {%- endcase -%}
      {%- endfor -%}
    </div>
  </div>
</div>
 
{% schema %}
{
  "name": "Video Banner",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
{
      "type": "text",
      "id": "video_url",
      "label": "Video Url"
    },
    {
      "type": "select",
      "id": "desktop_content_position",
      "options": [
        {
          "value": "top-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
        },
        {
          "value": "top-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
        },
        {
          "value": "top-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
        },
        {
          "value": "middle-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
        },
        {
          "value": "middle-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
        },
        {
          "value": "middle-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
        },
        {
          "value": "bottom-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
        },
        {
          "value": "bottom-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
        },
        {
          "value": "bottom-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
        }
      ],
      "default": "middle-center",
      "label": "t:sections.image-banner.settings.desktop_content_position.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_box",
      "default": true,
      "label": "t:sections.image-banner.settings.show_text_box.label"
    },
    {
      "type": "select",
      "id": "desktop_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.desktop_content_alignment.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    },
    {
      "type": "header",
      "content": "t:sections.image-banner.settings.mobile.content"
    },
    {
      "type": "select",
      "id": "mobile_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.mobile_content_alignment.label"
    },
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "Video Banner",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "t:sections.image-banner.blocks.heading.settings.heading.default",
          "label": "t:sections.image-banner.blocks.heading.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"
            },
            {
              "value": "hxl",
              "label": "t:sections.all.heading_size.options__4.label"
            },
            {
              "value": "hxxl",
              "label": "t:sections.all.heading_size.options__5.label"
            }
          ],
          "default": "h1",
          "label": "t:sections.all.heading_size.label"
        }
      ]
    },
    {
      "type": "text",
      "name": "Video Banner Heading",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "text",
          "default": "t:sections.image-banner.blocks.text.settings.text.default",
          "label": "t:sections.image-banner.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
            },
            {
              "value": "caption-with-letter-spacing",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
            }
          ],
          "default": "body",
          "label": "t:sections.image-banner.blocks.text.settings.text_style.label"
        }
      ]
    },
    {
      "type": "buttons",
      "name": "t:sections.image-banner.blocks.buttons.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label_1",
          "default": "t:sections.image-banner.blocks.buttons.settings.button_label_1.default",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
        },
        {
          "type": "url",
          "id": "button_link_1",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_1",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
        },
        {
          "type": "text",
          "id": "button_label_2",
          "default": "t:sections.image-banner.blocks.buttons.settings.button_label_2.default",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
        },
        {
          "type": "url",
          "id": "button_link_2",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_2",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Video Banner",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "buttons"
        }
      ]
    }
  ]
}
{% endschema %} 
 
And here is the asset code:
 
.banner {
  display: flex;
  position: relative;
  flex-direction: column;
  z-index: auto;
  isolation: isolate;
}
 
.banner__box {
  text-align: center;
}
 
@media only screen and (max-width: 749px) {
  .banner--content-align-mobile-right .banner__box {
    text-align: right;
  }
 
  .banner--content-align-mobile-left .banner__box {
    text-align: left;
  }
}
 
@media only screen and (min-width: 750px) {
  .banner--content-align-right .banner__box {
    text-align: right;
  }
 
  .banner--content-align-left .banner__box {
    text-align: left;
  }
 
  .banner--content-align-left.banner--desktop-transparent .banner__box,
  .banner--content-align-right.banner--desktop-transparent .banner__box,
  .banner--medium.banner--desktop-transparent .banner__box {
    max-width: 68rem;
  }
}
 
@media screen and (max-width: 749px) {
  .banner--small.banner--mobile-bottom .banner__media {
    height: 28rem;
  }
 
  .banner--medium.banner--mobile-bottom .banner__media > .banner__media {
    height: 34rem;
  }
 
  .banner--large.banner--mobile-bottom .banner__media > .banner__media {
    height: 39rem;
  }
 
  .banner--small:not(.banner--mobile-bottom) .banner__content {
    min-height: 28rem;
  }
 
  .banner--medium:not(.banner--mobile-bottom) .banner__content {
    min-height: 34rem;
  }
 
  .banner--large:not(.banner--mobile-bottom) .banner__content {
    min-height: 39rem;
  }
}
 
@media screen and (min-width: 750px) {
  .banner {
    flex-direction: row;
  }
 
  .banner--small:not(.banner--adapt) {
    min-height: 42rem;
  }
 
  .banner--medium:not(.banner--adapt) {
    min-height: 56rem;
  }
 
  .banner--large:not(.banner--adapt) {
    min-height: 72rem;
  }
 
  .banner__content.banner__content--top-left {
    align-items: flex-start;
    justify-content: flex-start;
  }
 
  .banner__content.banner__content--top-center {
    align-items: flex-start;
    justify-content: center;
  }
 
  .banner__content.banner__content--top-right {
    align-items: flex-start;
    justify-content: flex-end;
  }
 
  .banner__content.banner__content--middle-left {
    align-items: center;
    justify-content: flex-start;
  }
 
  .banner__content.banner__content--middle-center {
    align-items: center;
    justify-content: center;
  }
 
  .banner__content.banner__content--middle-right {
    align-items: center;
    justify-content: flex-end;
  }
 
  .banner__content.banner__content--bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
  }
 
  .banner__content.banner__content--bottom-center {
    align-items: flex-end;
    justify-content: center;
  }
 
  .banner__content.banner__content--bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
  }
}
 
@media screen and (max-width: 749px) {
  .banner{
    flex-direction: row;
    flex-wrap: wrap;
  }
}
 
.banner__media {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
 
@media screen and (min-width: 750px) {
  .banner__media {
    height: 100%;
  }
}
 
@media screen and (max-width: 749px) {
  .banner--mobile-bottom .banner__media {
    position: relative;
  }
 
  .banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
    background: transparent;
  }
 
  .banner:not(.banner--mobile-bottom) .banner__box {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
 
  .banner:not(.banner--mobile-bottom) .button--secondary {
    --alpha-button-background: 0;
  }
 
  .banner::before {
    display: none !important;
  }
}
 
.banner__content {
  padding: 0;
  display: flex;
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
 
@media screen and (min-width: 750px) {
  .banner__content {
    padding: 5rem;
  }
 
  .banner__content--top-left {
    align-items: flex-start;
    justify-content: flex-start;
  }
 
  .banner__content--top-center {
    align-items: flex-start;
    justify-content: center;
  }
 
  .banner__content--top-right {
    align-items: flex-start;
    justify-content: flex-end;
  }
 
  .banner__content--middle-left {
    align-items: center;
    justify-content: flex-start;
  }
 
  .banner__content--middle-center {
    align-items: center;
    justify-content: center;
  }
 
  .banner__content--middle-right {
    align-items: center;
    justify-content: flex-end;
  }
 
  .banner__content--bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
  }
 
  .banner__content--bottom-center {
    align-items: flex-end;
    justify-content: center;
  }
 
  .banner__content--bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
  }
}
 
@media screen and (max-width: 749px) {
  .banner--mobile-bottom .banner__content {
    order: 2;
  }
 
  .banner:not(.banner--mobile-bottom) .field__input,
  .banner--mobile-bottom .banner__box.color-scheme-1 {
    background: transparent;
  }
}
 
.banner__box {
  padding: 4rem 1.5rem;
  position: relative;
  height: fit-content;
  align-items: center;
  text-align: center;
  width: 100%;
  word-wrap: break-word;
  z-index: 1;
}
 
.banner--mobile-bottom .banner__box {
  padding: 4rem 3.5rem;
}
 
@media screen and (min-width: 750px) {
  .banner__box {
    padding: 4rem 3.5rem;
  }
 
  .banner--desktop-transparent .banner__box {
    padding: 4rem 0;
    background: transparent;
    max-width: 89rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
 
  .banner--desktop-transparent .button--secondary {
    --alpha-button-background: 0;
  }
 
  .banner--desktop-transparent .content-container:after {
    display: none;
  }
}
 
@media screen and (max-width: 749px) {
  .banner--mobile-bottom::after,
  .banner--mobile-bottom .banner__media::after {
    display: none;
  }
}
 
.banner::after,
.banner__media::after {
  content: '';
  position: absolute;
  top: 0;
  background: #000000;
  opacity: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
 
.banner__box > * + .banner__text {
  margin-top: 1.5rem;
}
 
@media screen and (min-width: 750px) {
  .banner__box > * + .banner__text {
    margin-top: 2rem;
  }
}
 
.banner__box > * + * {
  margin-top: 1rem;
}
 
.banner__box > *:first-child {
  margin-top: 0;
}
 
@media screen and (min-width: 750px) {
  .banner__box {
    width: auto;
    max-width: 71rem;
    min-width: 45rem;
  }
}
 
@media screen and (min-width: 1400px) {
  .banner__box {
    max-width: 90rem;
  }
}
 
.banner__heading {
  margin-bottom: 0;
}
 
.banner__box .banner__heading + * {
  margin-top: 1rem;
}
 
.banner__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 45rem;
  word-break: break-word;
}
 
@media screen and (max-width: 749px) {
  .banner--content-align-mobile-right .banner__buttons--multiple {
    justify-content: flex-end;
  }
 
  .banner--content-align-mobile-center .banner__buttons--multiple > * {
    flex-grow: 1;
    min-width: 22rem;
  }
}
 
@media screen and (min-width: 750px) {
  .banner--content-align-center .banner__buttons--multiple > * {
    flex-grow: 1;
    min-width: 22rem;
  }
 
  .banner--content-align-right .banner__buttons--multiple {
    justify-content: flex-end;
  }
}
 
.banner__box > * + .banner__buttons {
  margin-top: 2rem;
}
 
@media screen and (max-width: 749px) {
  .banner:not(.slideshow) .rte a,
  .banner:not(.slideshow) .inline-richtext a:hover,
  .banner:not(.slideshow) .rte a:hover {
    color: currentColor;
  }
}
 
@media screen and (min-width: 750px) {
  .banner--desktop-transparent .rte a,
  .banner--desktop-transparent .inline-richtext a:hover,
  .banner--desktop-transparent .rte a:hover {
    color: currentColor;
  }
}
 
/*Custom CSS for Video Background*/
.media.video-background>*:not(.zoom) {
  height: auto;
}
 
.banner__media, .banner:after, .banner__media:after {
background: none
}
 
@media screen and (max-width: 749px) {
  .banner.video-background:not(.banner--mobile-bottom) .banner__content {
  min-height: 20rem;
  }
 
  .button {
min-height: calc(3.5rem + var(--buttons-border-width) * 2);
font-size: 1.2rem;
  }
 
  .banner__box {
      padding-top: 1rem;
padding-bottom: 1rem;
  }
  .banner__heading.h0 {
      line-height: 2rem;
font-size: calc(var(--font-heading-scale) * 3rem);
  }
}
 
@media screen and (min-width: 550px) {
  .banner.video-background {
  min-height: 39rem;
  }
}
 
@media screen and (min-width: 990px) {
  .banner.video-background {
  min-height: 54rem;
  }
}
 
@media screen and (min-width: 1320px) {
  .banner.video-background {
  min-height: 72rem;
  }
}
Labels:
179 Views
0 Likes
Report
Reply 1 (1)

Small_Task_Help
Shopify Partner
826 27 74
‎08-14-2024 06:34 AM

Hi,

 

Modify HTML Structure

HTML code example

<div class="video-background-container">
    <video autoplay loop muted playsinline class="video-background">
        <source src="your-video-url.mp4" type="video/mp4">
        <!-- Add other video formats as needed -->
    </video>
</div>

Add CSS for the Video

CSS code example

.video-background-container {
    position: relative;
    overflow: hidden;
}

.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

Add Media Queries for Mobile

Code example

/* Desktop styling - video stays the same */
@media screen and (min-width: 768px) {
    .video-background-container {
        width: 100%;
        height: 100vh; /* Full viewport height */
    }
}

/* Mobile styling - video appears as a large square */
@media screen and (max-width: 767px) {
    .video-background-container {
        width: 100vw; /* Full viewport width */
        height: 100vw; /* Make the height equal to the width for a square */
    }

    .video-background {
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        transform: translate(-50%, -50%);
        object-fit: cover;
    }
}

Adjust for Different Viewport Sizes if required

To Get Shopify Experts Help, E-mail - [email protected]
About Us - We are Shopify Expert Agency
At Google My Business - Ecommerce Small Task - Hire Shopify Developers Ahmedabad
106 Views
0 Likes
Report

Community Blog Articles

b2b-store-_2_.webp
The 9 Questions You Need To Answer When Starting a B2B Store

Starting a B2B store is a big undertaking that requires careful planning and execution. W...

By JasonH Sep 23, 2024
page_thumb_platform Cropped.png
Get ready for peak holiday selling season 2024

By investing 30 minutes of your time, you can unlock the potential for increased sales,...

By Jacqui Sep 11, 2024
03 leaderboard.webp
Highlights | Top Contributors August '24

We appreciate the diverse ways you participate in and engage with the Shopify Communi...

By JasonH Sep 9, 2024
Terms of Service Privacy Policy