Knowledgebase: Weebly
Embed a Video on Your Weebly Site
Posted by ASO Admin on 26 February 2020 08:01 AM

Using our intuitive tools on the backend, you can embed video code from Youtube, Vimeo or other providers right onto your website's page.

The Weebly YouTube Video element allows you to share videos from, yes you guessed it, YouTube! You can find the YouTube element in the Media section of the elements when you're in the Build tab.

The YouTube element is one of the ways you can add a YouTube video to your site. The more flexible way, though, is to use the Embed Code element, also located in the Build tab elements. The Embed Code element can also be used to add Vimeo, Blip.tv, Ustream and other videos to your site.

Add a YouTube Video with YouTube Video Element

To add a YouTube Video to your site:

  1. Log into Weebly and navigate to the page (within the site) in which you want to add your YouTube video

  2. Click the Build tab, at the top of the page

  3. Drag the YouTube element (in the Media section in the left-hand sidebar) onto your page, where you want the video to appear 

  4. Click anywhere within the element that you drug to your page to bring up the YouTube options box

  5. Navigate to the YouTube video of your choosing in your web browser

  6. Click the Share button, underneath the video near the left-hand corner

  7. Copy the URL that shows in the highlighted blank underneath the row of social media icons 

  8. Enter the URL you just copied in the YouTube Video URL field in the YouTube options box in Weebly 


    Once you add the link, the video should appear on your page shortly. If it doesn't, then you didn't use the direct link as copied from the Share option in YouTube.

  9. Choose whether you want your video aligned to the left, center or right, via the icons provided

  10. Click the Spacing option to define the top and bottom margin spacing

  11. Click Advanced to set the size of the video as it appears on your page and to define the YouTube ID 


    If you feel limited by this element, or want to add a Vimeo or Ustream video or similar instead, you can use the Embed Code element. We'll show you how...

Add a Video with Embed Code Element

Check out the short video below that details how to use the Embed Code element to add a YouTube video to your site and see the detailed instructions iterated below to see how to add any video to your site.


 

To use the Embed Code element to add a video to your site:

  1. Click the Build tab, at the top of the page

  2. Drag the Embed Code element (in the Media section in the left-hand sidebar) onto your page, where you want the video to appear

  3. Navigate to the video of your choosing, whether it be YouTube, Vimeo, Ustream. Blip.tv or other, in your web browser

  4. ​Find the embed code for the video you want to add to your site and copy it; this is usually accessed via an embed or share button found near the video

    In Vimeo this share button appears on the right side of the video. 


    Here is an example of the embeddable share coding in Vimeo. 


    In YouTube, the share button appears underneath the video. 


    Here is an example of the embed code in YouTube. 

  5. Once you've copied the embed code from your online video source, click inside the Embed Code element within your Weebly site page

  6. Paste the copied code into the box

  7. Click outside the Embed Code element to 'paste' that code into place 

  8. Click the Edit Custom HTML button to edit the video manually (including size, margins, etc. IF you already know HTML)

  9. ​Click the Publish button to make this video change live on your site

Your video should be showing on the page and you should be able to play it to see how it looks! Need help? We're one (or two) clicks away.



Attachments 
 
 dragyoutube.png (96.19 KB)
 youtubeshare (1).png (79.19 KB)
 pasteurl.png (151.08 KB)
 spacingadvanced.png (225.92 KB)
 vimeoshare.png (676.37 KB)
 vimeoembed.png (301.97 KB)
 youtubeshare (1).png (79.19 KB)
 youtubeembed.png (113.68 KB)
 pastecode.png (56.93 KB)
(1 vote(s))
This article was helpful
This article was not helpful

Comments (0)
Post a new comment
 
 
Full Name:
Email:
Comments:
Help Desk Software by Kayako fusion
ERROR: This domain name (kb.asmallorange.com), does not match the domain name in the license key file help.asmallorange.com.

For assistance with your license, please contact the Kayako support team: https://support.kayako.com