BACKGROUND VIDEO

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

  D02 E03    03:21

Add YouTube and Vimeo Background Videos

Add YouTube and Vimeo to File Link to any Frame and your your video will appear in the background allowing you to places other objects (like Text) on top of it.

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 or purchase 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.