How to Add Videos in Weebly Site?

Sometimes videos are the easy way to express your thoughts to the visitors instead of writing lengthy content. It can be a how-to tutorial, introduction of your company or anything else. Adding videos in Weebly site is also easy similar to adding audio and text content. There are four ways to add videos in Weebly site as listed below and we will discuss each option in detail.

  1. Using HTML5 video tags.
  2. Use YouTube element to embed you YouTube videos.
  3. Embed Code element to embed any videos from sites like Vimeo.
  4. HD Video Player element for Weebly Pro users.

1. Using HTML5 Video Tag on Weebly Site

HTML5 video tags allow you to host your own videos on default video player. You don’t need to buy Weebly premium plan in order to use HTML5 video player element. You can use video links from other websites or upload your videos under “Theme > Assets” section. It is recommended to add .mp4, .ogv and .webm format videos to overcome browser compatibility issue.

Drag and drop an “Embed Code” element on the page you want to show your video. Paste the below HTML code inside “Embed Code” element. Ensure to replace the video links with your own.

<video poster="https://img.webnots.com/2015/06/Slider-3.jpg" width="640" height="480" preload controls loop>
<source src="https://img.webnots.com/2015/06/Slider-Video.mp4">
<source src="https://img.webnots.com/2015/06/Slider-Video.webm">
<source src="https://img.webnots.com/2015/06/Slider-Video.ogv">
</video>

The video will look like below requires manual play and supported by all modern browsers like Chrome, Firefox, Safari and Edge.

Related:  Are Free Website Builders Really Free and Worth?

Avoid using auto playing videos especially with audio to offer better user experience. You can provide the controls to users for choosing whether to play the video or not.

2. Video Embedding Using YouTube Element

YouTube is the popular video hosting platform from Google and Weebly offers default YouTube element to embed videos easily. YouTube element is available in Weebly editor under “Media” category. You can drag and drop the element any place on the content area.

Weebly Media Elements
Weebly Media Elements

Once the element is added on the content area, just click on it to see customizing options. You can add the YouTube video URL, set the alignment and spacing of video.

Weebly YouTube Video Embedding
Weebly YouTube Video Embedding

You also can add or change video ID in the advanced options and change the size of your video to fit within your content.

Change YouTube Video Size and ID in Weebly
Change YouTube Video Size and ID in Weebly

You can play the video inside the editor and publish your site to check the real streaming on browser.

Weebly does not offer an option to adjust the specific width and height of your video but the same can be achieved by placing “Spacer” elements adjacent to your YouTube video.

3. Video Embedding Using Custom HTML

Similar to HTML5 video tags, you can also use “Embed Code” element to insert the iframe video code from YouTube, Vimeo or any other video hosting sites offering iframe embed code.

  • Copy the embed code from any sites like YouTube or Vimeo.
  • Drag and drop “Embed Code” element in your site’s content area.
  • Paste the HTML embed code inside the element and publish your site.

4. Using Weebly Pro HD Video Player Element

The last option is to upgrade your Weebly site to a premium plan and use HD video player element. This is similar to the HTML5 video player but offered as a default element. High Definition (HD) Video Player is one of the key Weebly Pro feature which allows user to upload up to 1GB size of video file on their websites. This is a must feature if you are hosting a video site which requires unlimited video uploads.

Related:  Download Free Thin Divider Images for Website

4.1. Features of Weebly Pro HD Video Player

  • 1GB Video File Size
  • Unlimited number of Videos
  • Auto HD Conversion
  • Unbranded – You can upload videos with your own brand
  • Supports all standard formats
  • Various Video Sizes
  • In Page Video Playing – Video can be played inside Weebly editor without publishing your site.
  • Option to choose whether the video can be downloaded by the user or not.
  • Adjust the size, margins and position of the video to align with your content.

Weebly HD Video Player
Weebly HD Video Player

4.2. Process of Video Uploading to Weebly Site

  • Simply Drag and Drop the HD Video icon to your webpage
  • Click on the image “Click here to Upload a video” and select the video you want to upload
  • Once the video is uploaded it will be automatically encoded
  • Choose the size of your video
  • Play the video in page without publishing and check the clarity
  • Publish your site
Weebly Video Upload Process
Weebly Video Upload Process

4.3. Video Controls

Following video control options are available during the play of the video as shown in the below picture:

Weebly Video Player Controls
Weebly Video Player Controls

  • Play or Pause button
  • Current time and the total video time
  • Seek bar to go to any place in the video
  • Volume control
  • Full screen mode

By selecting the check box “Video Downloadable” you can make the video downloadable by the user.

Weebly Video Player Options
Weebly Video Player Options

The video control will shown an option for downloading the video as shown in the picture below.

Downloading Option for Weebly Video
Downloading Option for Weebly Video

4.4. Drawbacks

Well, HD Video player is one of the main attraction in the Weebly Pro pack but there are simple requirements hopefully Weebly will accommodate in near future.

Related:  How to Add a PollDaddy Poll in Weebly Site?

  • Video player is a mere player, you can’t record video from USB camera
  • You can’t convert your photos in to you a video
  • No possibility to generate embed coding
  • Social sharing icons are not available to share the video URL
  • Video view statistics not available – you will not know the popularity of your video or how many people viewed it
  • No playlist option available, this means only one video can be uploaded and viewed

Even if you upload a wonderful video in your Weebly site, there is no way the users can embed your videos in their site. Worst part is that the video can’t be shared in any social media which means a loss of inbound links to your site and hence the traffic and the search engine ranking. At the same time, this protects the copyright of the owners especially if you are running an online store selling licensed videos.

Weebly Free Vs Pro Video Player

Free video embedding has the following advantages over uploading using pro HD video player element.

  • Low page loading time which gives a good user experience in slower internet connections.
  • Reduced crawling issues for search engine crawlers due to less page size.
  • Overall site size will increase considerably with uploaded video size hence site backup will take longer time to download all your content.
  • Embedded videos can easily be shared in social media which will increase the popularity of your site.
  • Uploading needs you to create or own your videos, but for embedding you can embed any videos available with free distribution license.
Recommended Articles:

5 thoughts on “How to Add Videos in Weebly Site?”

  1. Hi! I tried to add a video using “HTML 5” tag, but it doesn’t work perfectly on mobile if the “height ” is a fixed number. I was wondering if you could help me with this! Thanks a million!

    Reply
  2. Hi! I’m trying to upload a video from my computer and embed it on to my weebly site. I followed all of the steps underneath your “Using HTML5 Video Tag on Weebly Site” section but it didn’t work. A video player pops up, but it’s completely gray with no image and it doesn’t play anything. I was hoping you could help me with this. Thanks!

    Reply

Leave a Comment