Skip to main content

: Video Pop-Up

  • Updated

How to find these settings...

  1. Online Store
  2. Customize (Theme Editor)
  3. Add section
  4. Video Pop-Up

Display YouTube or Vimeo videos in a modal pop up

 

Recommended reading

In this section...

 

Enable heading *

To accommodate customizations using other sections and headings, you can opt to exclude the default heading

 

Heading

Title of the section or page, either default or custom

 

Use h1 tag

For SEO purposes, set the 'Heading' to use an h1 tag. NOTE: This should only be used once per page

 

Heading size

Set the heading size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px

 

Subheading

Secondary title of the section or feature

 

Subheading size

Set the subheading size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px

 

Text *

A text block for basic formatting including bold, italic & linked text

 

Text color

Choose a custom color for the text

 

Text hover color *

Choose a custom color for links when hovered over

 

Button text color *

Choose a custom color for the default button text and the outlined button hover text

 

Text alignment

Text can be aligned to the left, right or centered to the container

 

Content width

The design is based on a 12 column, 1200px wide layout. Refer to the following table to reference content widths:

Setting

Desktop Width

Mobile Width

33%

380px

100%

50%

580px

100%

66%

780px

100%

75%

800px

100%

 

Horizontal position

After setting the content width, content can be aligned to the left, right or centered

 

Vertical position

After setting the content width, content can be aligned to the top, bottom or middle

 

Desktop/Mobile/Custom Image

The background image dimensions depend on 2 options:

  • Whether full width or container width.  Refer to 'Full width' below
  • The height will depend on your 'Height' settings below

 

Full width

The banner image and background color have the option of being as wide as the screen or only as wide as the content container. Refer to the following table to reference content widths & optimal image sizing:

Setting

Desktop Width

Minimum Desktop/Mobile Width

Full width checked

100%

1900px/600px

Full width unchecked

1180px

1180px/600px

 

The height will determine the overall width of the background image.  The following would be used to determine the actual necessary width of an image:

Screen Width x Height x Image Ratio = Desired Width

 

Height

The overall height of the banner in relation to the height of the screen.  0-5% is the minimum, and it steps up by 5 to a maximum of 100%. 

Some sections may have Desktop & Mobile options:

  • Desktop:  Used on screens larger than 768px
  • Mobile: Used on screens smaller than 768px

 

Overlay color

A color may be applied to background images to help the text clarity

 

Overlay gradient

A gradient may be applied to background images to help the text clarity

 

Overlay opacity

When an 'Overlay' color has been selected, control the opacity with the slider.  0% is the minimum, and it steps up by 5 to a maximum of 100%

 

* May not be available in all Banners

 

Video

Video link

Input the shareable video link.  If you are unsure of the URL:

  • YouTube: Click on the video, then in the lower right, scroll over the YouTube logo and click to watch on YouTube.  Once on the video page, look for the share link under the video to the right.  Copy the URL, example: https://youtu.be/_9VUPq3SxOc
  • Vimeo: Hover over the video and click the paper airplane icon in the upper right.  Copy the URL that is displayed.  If you are unable to copy it, click the same link to go to the video page.  Once there, click the Share button under the video to the right and copy the link, example: https://vimeo.com/187191019

 

Section

Lazy load images *

Disable for "above the fold" images.  Enable for any image that is not visible on the initial page load

 

Background color

Choose a custom color for the background

 

Background gradient

Choose a custom gradient for the background

 

MOBILE

 

Top padding

Add padding to the top of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px

 

Bottom padding

Add padding to the bottom of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px

 

Bottom margin

Add a margin to the bottom of the section on screens less than 768px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px

 

DESKTOP

 

Top padding

Add padding to the top of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px

 

Bottom padding

Add padding to the bottom of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px

 

Bottom margin

Add a margin to the bottom of the section on screens larger than 768px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px

 

Add a bottom border

A 1px border will be added between the 'Bottom padding' and the 'Bottom margin'

 

* May not be available in all Sections

 

* NOTE: May not be available on all sections, blocks or templates