---
title: Adding a video gallery section with YouTube or Vimeo links [B12 2.0]
description: How to add videos to any page
---

[Skip to content](https://support.b12.io/en/v2/adding-a-video-gallery-section-with-youtube-or-vimeo-links#main-content)

![b12 logo](https://support.b12.io/hubfs/b12%20logo.svg)

- [Help Center](https://support.b12.io/)
- [B12 Website](https://www.b12.io/)
- [AI Website Prompts](https://www.b12.io/ai-website-prompt-gallery)
- [Resources](https://www.b12.io/resource-center/)
- [Pricing](https://www.b12.io/pricing/)
- [Log in](https://b12.io/dashboard/)

Open main navigation

Close main navigation

- [Help Center](https://support.b12.io/)
- [B12 Website](https://www.b12.io/)
- [AI Website Prompts](https://www.b12.io/ai-website-prompt-gallery)
- [Resources](https://www.b12.io/resource-center/)
- [Pricing](https://www.b12.io/pricing/)
- [Log in](https://b12.io/dashboard/)
- [Start for free](https://b12.io/signup/)

[Start for free](https://b12.io/signup/)

 How can we help?

- There are no suggestions because the search field is empty.

1. [B12 Help Center](https://support.b12.io/en?hsLang=en)
2. [B12 2.0](https://support.b12.io/en/b12-2-0?hsLang=en)
3. [Website Structure and Content](https://support.b12.io/en/b12-2-0?hsLang=en#website-structure-and-content)

# Adding a video gallery section with YouTube or Vimeo links \[B12 2.0\]

## Learn how to add videos to any page.

| ![](https://support.b12.io/hs-fs/hubfs/me-webp-3-webp-Sep-25-2024-05-41-58-9370-PM.webp?width=60&height=60&name=me-webp-3-webp-Sep-25-2024-05-41-58-9370-PM.webp) Written by: Madeline B. Last updated: 18 Oct. 2025 |
| --- |

A video gallery is a great way to display multiple videos on your website while keeping your layout clean and professional. Visitors can easily browse your video thumbnails and play each video in full screen—complete with sound—on any device.

This guide will walk you through how to add a Video gallery section, upload thumbnails, and connect your videos from platforms like YouTube or Vimeo.

**Tip:** If you'd like to add a video background to a section, [see these instructions](https://support.b12.io/en/articles/699544-changing-a-background-image-or-video?hsLang=en).

### Creating a video gallery section

Before adding a video link, make sure your page includes a **Video gallery** section. Here's how:

1\. In the left sidebar, click `Website` \> `Pages`, then navigate to the page where you want the video gallery.

2\. Click the `Add Section`**.**

3\. From the section categories, select `Video gallery`.

![](https://support.b12.io/hs-fs/hubfs/image-png-Oct-17-2025-07-41-35-0178-PM.png?width=250&height=554&name=image-png-Oct-17-2025-07-41-35-0178-PM.png)  
4\. Click `Continue`.

![](https://support.b12.io/hs-fs/hubfs/image-png-Oct-17-2025-07-43-13-8969-PM.png?width=250&height=512&name=image-png-Oct-17-2025-07-43-13-8969-PM.png)

5\. Scroll to **Collection**, then click `Add new resource`. You can also click on the existing ones to replace them.

![](https://support.b12.io/hs-fs/hubfs/image-png-Oct-17-2025-07-44-24-3160-PM.png?width=250&height=210&name=image-png-Oct-17-2025-07-44-24-3160-PM.png)

6\. Click `add and edit manually` under **Add resource**.

![](https://support.b12.io/hs-fs/hubfs/image-png-Oct-17-2025-07-46-37-3503-PM.png?width=250&height=389&name=image-png-Oct-17-2025-07-46-37-3503-PM.png)

7\. Enter a title and description, then click the `` button to add your YouTube or Vimeo link.

![](https://support.b12.io/hs-fs/hubfs/image-png-Oct-17-2025-07-47-25-3328-PM.png?width=250&height=470&name=image-png-Oct-17-2025-07-47-25-3328-PM.png)

8\. Add your text, then under **Link type**, select `External website URL`.

![](https://support.b12.io/hs-fs/hubfs/image-png-Oct-17-2025-07-49-08-0880-PM.png?width=250&height=414&name=image-png-Oct-17-2025-07-49-08-0880-PM.png)

9\. Paste your link under **Links to**. 

![](https://support.b12.io/hs-fs/hubfs/image-png-Oct-17-2025-07-50-21-7206-PM.png?width=250&height=408&name=image-png-Oct-17-2025-07-50-21-7206-PM.png)

You can also toggle to open your video in a new tab, add nofollow attribute, make it appear as a video or a link, or add an active state border around the item.

10\. Click `Back`.

11\. Under **Image**, click `Choose from library`, then `Upload media`. Select a thumbnail image from your computer, click `Open`, and then `Continue`.

![](https://support.b12.io/hs-fs/hubfs/image-png-Oct-17-2025-07-53-40-2695-PM.png?width=250&height=488&name=image-png-Oct-17-2025-07-53-40-2695-PM.png)

**Note:** If you don’t upload a thumbnail, the item will display as a gray placeholder box.

![](https://support.b12.io/hs-fs/hubfs/image-png-Oct-17-2025-07-57-22-7774-PM.png?width=250&height=169&name=image-png-Oct-17-2025-07-57-22-7774-PM.png)

12\. Click `Add item` to save.

![](https://support.b12.io/hs-fs/hubfs/image-png-Oct-17-2025-07-58-02-2994-PM.png?width=250&height=194&name=image-png-Oct-17-2025-07-58-02-2994-PM.png)

Your new gallery item should now display with a play button. Click it to confirm your video link works correctly.

**Note:** We recommend hosting videos on **YouTube** or **Vimeo** for best performance and speed. You can also upload your own video files to a video gallery section if they’re **75 MB or smaller**.

#### See also:

- [Integrations FAQ](https://support.b12.io/en/articles/2481107-integrations-faq?hsLang=en)
- [Adding an Integration](https://support.b12.io/en/articles/1658662-how-to-add-an-integration-or-html-code?hsLang=en)

- [Getting started](https://support.b12.io/en/getting-started?hsLang=en#main-content)

    - [Introduction](https://support.b12.io/en/getting-started?hsLang=en#introduction)
    - [Detailed guides](https://support.b12.io/en/getting-started?hsLang=en#detailed-guides)
- [Working with B12's AI Agent](https://support.b12.io/en/working-with-b12s-ai-agent?hsLang=en#main-content)

    - [Agent Skills](https://support.b12.io/en/working-with-b12s-ai-agent?hsLang=en#agent-skills)
- [Built-in features](https://support.b12.io/en/built-in-features?hsLang=en#main-content)

    - [Visual edit](https://support.b12.io/en/built-in-features?hsLang=en#visual-edit)
    - [Code editor](https://support.b12.io/en/built-in-features?hsLang=en#code-editor)
    - [Data & users (Backends)](https://support.b12.io/en/built-in-features?hsLang=en#data-users-backends)
    - [Forms & submissions](https://support.b12.io/en/built-in-features?hsLang=en#forms-submissions)
    - [Commerce](https://support.b12.io/en/built-in-features?hsLang=en#commerce)
    - [Contact manager](https://support.b12.io/en/built-in-features?hsLang=en#contact-manager)
    - [eSignatures](https://support.b12.io/en/built-in-features?hsLang=en#esignatures)
    - [Email Marketing](https://support.b12.io/en/built-in-features?hsLang=en#email-marketing)
    - [Team](https://support.b12.io/en/built-in-features?hsLang=en#team)
    - [Analytics](https://support.b12.io/en/built-in-features?hsLang=en#analytics)
    - [Website settings](https://support.b12.io/en/built-in-features?hsLang=en#website-settings)
- [Adding functionality](https://support.b12.io/en/adding-functionality?hsLang=en#main-content)

    - [Third-party integrations](https://support.b12.io/en/adding-functionality?hsLang=en#third-party-integrations)
- [Publishing & growing](https://support.b12.io/en/publishing-growing?hsLang=en#main-content)

    - [Domains](https://support.b12.io/en/publishing-growing?hsLang=en#domains)
    - [Connecting your Domain](https://support.b12.io/en/publishing-growing?hsLang=en#connecting-your-domain)
    - [Managing Your Domain](https://support.b12.io/en/publishing-growing?hsLang=en#managing-your-domain)
    - [Email Forwarding & Sending](https://support.b12.io/en/publishing-growing?hsLang=en#email-forwarding-sending)
    - [Growth & Marketing](https://support.b12.io/en/publishing-growing?hsLang=en#growth-marketing)
- [Troubleshooting](https://support.b12.io/en/troubleshooting?hsLang=en#main-content)

    - [FAQs](https://support.b12.io/en/troubleshooting?hsLang=en#faqs)
- [Account & billing](https://support.b12.io/en/account-billing?hsLang=en#main-content)

    - [Account Login & Password](https://support.b12.io/en/account-billing?hsLang=en#account-login-password)
    - [Subscription & Payment Information](https://support.b12.io/en/account-billing?hsLang=en#subscription-payment-information)
    - [Your Account](https://support.b12.io/en/account-billing?hsLang=en#your-account)
    - [Managing Multiple Websites](https://support.b12.io/en/account-billing?hsLang=en#managing-multiple-websites)
    - [Multi-user](https://support.b12.io/en/account-billing?hsLang=en#multi-user)
- [Getting support](https://support.b12.io/en/getting-support?hsLang=en#main-content)

    - [Professional & Advanced Plan Support (B12 2.0)](https://support.b12.io/en/getting-support?hsLang=en#professional-advanced-plan-support-b12-2-0)
- [B12 2.0](https://support.b12.io/en/b12-2-0?hsLang=en#main-content)

    - [Website Structure and Content](https://support.b12.io/en/b12-2-0?hsLang=en#website-structure-and-content)
    - [Website Style & Design](https://support.b12.io/en/b12-2-0?hsLang=en#website-style-design)
    - [Sitewide Settings](https://support.b12.io/en/b12-2-0?hsLang=en#sitewide-settings)
    - [Using the B12 Editor](https://support.b12.io/en/b12-2-0?hsLang=en#using-the-b12-editor)
    - [Analytics & SEO](https://support.b12.io/en/b12-2-0?hsLang=en#analytics-seo)
    - [Integrations - General](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-general)
    - [Integrations - Communication](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-communication)
    - [Integrations - Language](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-language)
    - [Integrations - Ecommerce](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-ecommerce)
    - [Professional & Advanced Plan Features](https://support.b12.io/en/b12-2-0?hsLang=en#professional-advanced-plan-features)
    - [Troubleshooting & Resources](https://support.b12.io/en/b12-2-0?hsLang=en#troubleshooting-resources)
    - [Contact Forms](https://support.b12.io/en/b12-2-0?hsLang=en#contact-forms)
    - [Online Scheduling](https://support.b12.io/en/b12-2-0?hsLang=en#online-scheduling)
    - [Advanced Editing (Experts Only)](https://support.b12.io/en/b12-2-0?hsLang=en#advanced-editing-experts-only)

[![B12\_logo\_2025](https://support.b12.io/hs-fs/hubfs/B12_logo_2025.png?width=53&height=24&name=B12_logo_2025.png "B12_logo_2025")](https://www.b12.io)

© 2025 B12. All rights reserved.

<https://twitter.com/b12> <https://www.facebook.com/B12io> <https://www.youtube.com/@b12io> <https://www.instagram.com/b12io>

×