BACKGROUND VIDEO

Add Vimeo or YouTube videos to the background of your web pages, as simply as copy and pasting code.

  04:35

Video

Add Embed Videos and Background Videos to your website pages, hosted by Vimeo or YouTube. Though you don't need to loose valuable SEO and meta information with your videos. Create them as files so that the behave just like any other images or file, and even drop them in to you Widgets for Dynamic Content.

VIMEO PRO:

To embed a Vimeo video as a high def background video you need to have a Vimeo Pro account.


GET YOUR VIMEO CODE:

Once you have uploaded a video to your Vimeo account, you can now paste the code to your website.

  • In your Vimeo account go to 'Settings' for the video that you wish to use in your background
  • Go to 'Video File'
  • Scroll down to 'Access your video files'
  • Copy the code for 'High Def 1080p (mp4, 1920x1080)' It should look a little like this:
    • https://player.vimeo.com/external/125217036.hd.mp4?s=dcbcfb5b86330ad6a7eac1971acf1e5fde0da187&profile_id=119
  • Now, return back to MOBLE, paste this code into the 'Background Video' area where you would like it to appear.


PLEASE NOTE:

Please note that for background videos MOBLE does not use the following functions to embed your video:

  • Does not use the video URL to embed background videos
  • Does not use the video ID to embed background videos
  • Does not use the standard video embed code to embed background videos (though this can be used for other videos on the page, i.e. those that are not the background)


MY VIDEO IS NOT HIGH DEF 1080p (mp4, 1920x1080):

When recording your video it is important that you produce your video in a format that will display perfectly across the internet. Your video will appear on many screen sizes and therefore you do not want your video to stretch, otherwise, it might be pixelated or blurry.

Please produce your video at 1080p at a resolution or 1920x1080. 

If your video is only 720p, please note that it will most likely look pixelated, particularly when viewed on a desktop.

You can read more about Vimeo's compression guidelines here: https://vimeo.com/help/compression

YOUTUBE

You can use YouTube for background videos. MOBLE will automatically extract the YouTube tools such as the fullscreen, play button and share tools etc. The end result is a clean video only displaying the video itself.

When using YouTube, MOBLE CMS automatically sets your video as follows:

  • Sets to autoplay, so that no play button required
  • Loops it, so that there is always something playing in the background on all devices

Essentially, all you have to do it paste in the correct YouTube code and everything else happens automatically for you, giving you an amazing background effect.


HOW TO ADD THE YOUTUBE EMBED CODE

  • Locate your video on YouTube
  • Underneath the video click the 'Share' button 
  • Copy the 'link'
  • Return to MOBLE and paste the YouTube link in the 'Background Video' field, located in the Frame Tools popup.


Copy a YouTube Link

STOCK VIDEO:

The following popular websites have stock video clips that you may purchase for your backgrounds*.


*Please always ensure that you have the rights to use videos.


PAGE LOAD BEST PRACTICE:

To ensure that your website page loads as quickly as possible, it is best practice to only use one background video per page. This is because the background video will autoplay and place higher demands on the browser. If using more than one background video, please check that your web page loads sufficiently.


70 Award
Winning AI Themes

Start your AI Website now
Start your AI Agency now

GETTING AROUND

GET A QUOTE

A Web Builder for Design. A CMS for Business. We serve all businesses from SME's to Enterprise. Talk with us for AI development, custom website design, website development, ecommerce websites, directories, intranets and social networks.