Skip to main content
All CollectionsBuilding on CodeDesign - Advanced
Adding YouTube Videos to Your CodeDesign Project
Adding YouTube Videos to Your CodeDesign Project
Updated over a month ago

Integrating YouTube videos into your CodeDesign projects has never been easier. Whether you're looking to showcase a product demo, share a tutorial, or enhance your content with engaging videos, the YouTube element in CodeDesign Builder offers a seamless solution.

We've made this detailed video guide that runs you through the entire process. In case you prefer a step-by-step article, here’s a step-by-step guide to help you embed and customize YouTube videos effortlessly.


Step-by-step Guide Adding YouTube Videos to Your CodeDesign Project

Step 1: Select a Section to put the Video

Begin by navigating to the section under which you want the YouTube video to appear. Hover BELOW the bottom resize handler of the section and click the Add Element button.

Note: Using the 'Add Button' below the resize handler will let you add a new element UNDER the section you selected.


Step 2: Access the Elements Panel

Once the Elements panel pops up, scroll down to the Embed section. Here, you’ll find the YouTube Element. Click on it, and a placeholder for the YouTube video will be added to your canvas directly below the selected section.


Step 3: Add the YouTube Link

To embed a video:

  1. Double-click on the placeholder in the canvas.

  2. A pop-up with an input field will appear.

  3. Copy the YouTube video link from your browser or use the Share button on YouTube to obtain the URL.

  4. Paste the link into the input field.

Your video will now appear in the placeholder.


Step 4: Customize the Video Settings

The YouTube element offers three key customization options:

  • Autoplay: Enable this to start playing the video automatically when the page loads.

  • Custom Controls: Turn this on to provide users with playback controls.

  • Mute on Load: Mute the video by default when it loads.

For this example, we’ve enabled all three options for a smooth viewing experience.


Step 5: Publish and Preview

Once your video is set up and customized, publish the page. On the live version, the video will autoplay when users scroll to it, muted by default, and with playback controls enabled.


Conclusion

Adding YouTube videos to your project is a simple yet powerful way to enrich your content. Whether for tutorials, promotions, or storytelling, videos bring dynamic energy to your website. For any questions or assistance, reach out through our support chat, forums, or the comments section.

Happy designing with CodeDesign.ai!

Did this answer your question?