# Video

With Palo Alto's video section, you can create affluent, modern, video-based promotional sections to enhance and showcase your brand, products, and services.&#x20;

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FZiLMYfYZdkx5oVaVVJPX%2Fvideo-section-example.gif?alt=media&#x26;token=61e2a95c-de4e-410a-9629-1eceaa78c538" alt=""><figcaption><p>Looping MP4 or MOV video in the Video section</p></figcaption></figure>

### Flexible

The video section can loop **MP4** or **MOV** format videos from your Shopify content library. Videos can also appear with a pop-up player, ideal for longer video content.&#x20;

Palo Alto presents a clean branded experience for shoppers, including options to add separate poster images for desktop and mobile devices. These images will load first while your video is loading into the browser and then be replaced by the video content.&#x20;

Adding videos to your store is perfect for creating attractive promotions. You can easily incorporate them into any page of your store.

### YouTube and Vimeo

YouTube and Vimeo videos can only be displayed as **Popup** videos. Shopify can't control the ads and linked videos that YouTube or Vimeo display in the video, resulting in a very unprofessional background section.&#x20;

If you need to use a YouTube or Vimeo video, we have a couple of recommendations:

* To use as a background video, download the YouTube or Vimeo video and convert it to MP4 or MOV format. Then, you can simply add it to your Shopify library.
* In the Popup section, you can add the YouTube or Vimeo URL for a Popup video. To represent the video, use a branded image or a still frame from the video.&#x20;

### Customize

Use the section settings to configure all the options for the video section.&#x20;

* To **loop** an MP4 or MOV video, select a supported video from your content library into the video option.&#x20;
* To use the optional **popup** feature, check the toggle option and select a video from your content library or a **YouTube/Vimeo** link address. In the section settings, lower down, find, and adjust the button style and colors to modify the play icon.&#x20;
* In the image section, add a branded image or still frame image for desktop and mobile options. These images will be used while your video is loading into the browser. The mobile version is optional but recommended with a taller portrait-style image. For desktop, we recommend a **16:9** aspect ratio image, and for mobile, an **18:9** or **19:9** aspect ratio image.&#x20;
* Under Layout, use the desktop and mobile height options to find the right size for the **video** and poster **image**. Desktop and mobile controls are available.&#x20;
* For a banner-style image, choose the full-width option or add padding when using it to promote a page that incorporates padding on the sides.&#x20;
* Add any optional text content with the heading and text settings. You can adjust the size for each of them.&#x20;
* You can configure a call-to-action **button** or use the button settings to customize the popup play button style. Two buttons can be displayed.&#x20;

### Settings

Watch this walkthrough video to learn how the settings and features work, including the popup and looping background video:

{% embed url="<https://www.loom.com/share/0105f603e70443b493bb131fd1e3699e?sid=5272f7b9-43ae-4ffb-8471-21080cbd1a87>" %}

<table><thead><tr><th width="213.4921875">Settings</th><th width="141.8299560546875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Desktop height</td><td align="center"><code>select</code></td><td>Sets the section height on desktop. Options include <code>Full screen</code>, <code>Fractions of screen</code>, or <code>Fixed px values</code>.</td></tr><tr><td>Enable mobile height</td><td align="center"><code>checkbox</code></td><td>Toggles custom height for mobile view.</td></tr><tr><td>Mobile height</td><td align="center"><code>select</code></td><td>Sets the section height on mobile devices if enabled.</td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Controls the content width: <code>Narrow</code>, <code>Normal</code>, or <code>Wide</code>.</td></tr><tr><td>Content alignment</td><td align="center"><code>select</code></td><td>Aligns content within the video area. Positions include: <code>Top right</code>, <code>Bottom left</code>, <code>Center</code>, etc.</td></tr><tr><td><strong>Video</strong></td><td align="center"></td><td></td></tr><tr><td>Video background link</td><td align="center"><code>text</code></td><td>MP4 file used as the background video. Only accepts files uploaded in admin.</td></tr><tr><td>Video popup link</td><td align="center"><code>text</code></td><td>Link to popup video (YouTube, Vimeo, or MP4).</td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Placeholder image shown while video loads.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity overlay</code>, and <code>Text underlay</code>.</td></tr><tr><td><strong>Text</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>richtext</code></td><td>Main heading text. Supports HTML with optional emphasis.</td></tr><tr><td>Heading size</td><td align="center"><code>range</code></td><td>Adjusts heading size.</td></tr><tr><td><strong>Highlight</strong></td><td align="center"></td><td></td></tr><tr><td>Type</td><td align="center"><code>select</code></td><td>Style for emphasized words: <code>Underline</code>, <code>Squiggle</code>, <code>Alternate font</code>, etc.</td></tr><tr><td>Highlight color</td><td align="center"><code>color</code></td><td>Background or line color for the highlight style.</td></tr><tr><td>Text color</td><td align="center"><code>color</code></td><td>Text color within highlighted area.</td></tr><tr><td>Text</td><td align="center"><code>textarea</code></td><td>Optional descriptive text below heading.</td></tr><tr><td>Text size</td><td align="center"><code>range</code></td><td>Adjusts size of the supporting text.</td></tr><tr><td>Button 1</td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Label for the first button.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>URL the button should link to.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Button color theme: <code>Primary</code>, <code>Secondary</code>, <code>White</code>, or <code>Black</code>.</td></tr><tr><td>Button style</td><td align="center"><code>select</code></td><td>Style of the button: <code>Solid</code>, <code>Outline</code>, <code>Text</code>, or <code>Solid with border</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Size of the button: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Button 2</td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Label for the second button.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>URL the second button links to.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Color theme for the second button.</td></tr><tr><td>Button style</td><td align="center"><code>select</code></td><td>Style of the second button.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Size of the second button.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Applies a predefined theme color scheme to the section.</td></tr><tr><td>Show text background</td><td align="center"><code>checkbox</code></td><td>Adds a colored background behind text.</td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Override color scheme for background.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Override color scheme for text.</td></tr></tbody></table>
