Adding & Using Video Print

  • 0

How to use "Video"? 

To insert video to the website you have several options:

Option 1 (insert media player, e.g. Youtube):

Adding Youtube:

  • Drag & drop "Media" from main toolbar;
  • Choose Youtube composition;
  • Write "URL or ID" in right toolbar.

Customizing video:

  • Size:
    Adjust video size or "Allow to adjust size automatically" in right toolbar.

Option 2 (upload video from your computers, will be played as a background):

  • Select "Shape" widget and choose shape composition;
  • Click background  in right toolbar;
  • Choose Image / Video and click ;
  • Click "Upload New File", choose video, click open, and click "Select";
  • Under the video choose the backgrounds video settings: opacity; start time and end time;
  • Video will be played with no sound.
    Note. You can just drag and drop video file from your computer to website builder.

Option 3 (upload video from your computer):

  • Select "Advanced" widget and choose "Custom Html";
  • In the right toolbar's "Custom Html" tab select HTML code by clicking on a pencil icon;

Insert this code:
<video style="width: 100%; height: 100%; position: relative; z-index: 2;" src="VIDEO_FILE" controls>

    Your browser does not support the video tag.

  • </video>
  • Select word "VIDEO_FILE" (without quotes) and delete it;
  • Click "Click to add file(s)" button in top right corner to choose your video file;
  • Click "Upload New File", choose video, open, click "Select", and click "Apply" button;
  • Video will be played with a sound.

How to use "YouTube"? 

  1. Adding Youtube:
    • Drag & drop "Media" from main toolbar;
    • Choose Youtube composition;
    • Write "Youtube URL or ID" in right toolbar.
  2. Customising video:
    • Size:
      Adjust video size or "Allow to adjust size automatically" in right toolbar.
    • Set to allow "Show player controls" or "Use nocookie domain" in right toolbar;
    • Start time:
      Write start time when your video will start playing in right toolbar.

How to use "Instagram video"? 

  1. Adding Instagram:
    • Drag & drop "Media" from main toolbar;
    • Choose Instagram composition;
    • Write "Instagram post URL or ID" in right toolbar.
  2. Customizing video:
    • Size:
      Adjust video size or "Allow to adjust size automatically" in right toolbar.

How to use "Facebook video"? 

  1. Adding Facebook:
    • Drag & drop "Media" from main toolbar;
    • Choose Facebook composition;
    • Write "Facebook post URL or ID" in right toolbar.
  2. Customizing video:
    • Size:
      Adjust video size or "Allow to adjust size automatically" in right toolbar.
    • Start time:
      Write start time when your video will start to play in right toolbar.

How to use "Music Player"? 

  1. Adding Music Player:
    • Drag & drop "Media" from main toolbar;
    • Choose Music Player composition;
    • Click MP3 file(s)  in right toolbar to upload file.
  2. Customizing music player:
    • Size:
      Adjust music player size or "Allow to adjust size automatically" in right toolbar.
    • Start music player when page is loaded:
      Choose if you want to "Start playing when page is loaded" in right toolbar.

  3. Note. You can just drag and drop video file from your computer to website builder.

How to use "Spotify"? 

  1. Adding Spotify player:
    • Drag & drop "Media" from main toolbar;
    • Choose Spotify player composition;
    • Write "Spotify Link or URL" in right toolbar.
  2. Customizing player:
    • Size:
      Adjust player size or "Allow to adjust size automatically" in right toolbar.

How to use "Vimeo"? 

  1. Adding Vimeo:
    • Drag & drop "Media" from main toolbar;
    • Choose Vimeo composition;
    • Write "Vimeo ID or URL" in right toolbar.
  2. Customizing video:
    • Size:
      Adjust video size or "Allow to adjust size automatically" in right toolbar.
    • Show user's portrait or title:
      Set to show the user's portrait and title on the video in right toolbar.
    • Autoplay:
      Select the video to play automatically on load in right toolbar.
    • Set video controls colour:
      Click  to specify the colour of the video controls in right toolbar.

How to use "Youku"? 

  1. Adding Youku:
    • Drag & drop "Media" from main toolbar;
    • Choose Youku composition;
    • Write "Copy full youku video URL" in right toolbar.
  2. Customizing video:
    • Size:
      Adjust video size or "Allow to adjust size automatically" in right toolbar.
    • Autoplay:
      Select to autoplay in right toolbar.

How to use "Aparat"? 

  1. Adding Aparat:
    • Drag & drop "Media" from main toolbar;
    • Choose Aparat composition;
    • Write "Aparat ID or URL" in right toolbar.
  2. Customizing video:
    • Size:
      Adjust video size or "Allow to adjust size automatically" in right toolbar.
    • Start time:
      Set video start time in right toolbar.

How to use "Rutube video"? 

  1. Adding Rutube:
    • Drag & drop "Media" from main toolbar;
    • Choose Rutube composition;
    • Write "Rutube ID or URL" in right toolbar.
  2. Customizing video:
    • Size:
      Adjust video size or "Allow to adjust size automatically" in right toolbar.

How to use "VK video"? 

  1. Adding VK:
    • Drag & drop "Media" from main toolbar;
    • Choose VK composition;
    • Write "Video embed code" in right toolbar.
  2. Customizing video:
    • Size:
      Adjust video size or "Allow to adjust size automatically" in right toolbar.

Different backgrounds are shown in website builder and on published website

This issue is usually related to the fact that you have background image set for both layout element ("Vertical Layout" or "Horizontal Layout") and native background (option "Background"), and also, use Shape element as an extra background in that layout element (option "Background element").

You should use only one of these backgrounds either by:

  • removing image from layout element native background;
  • detaching Shape element as a background from that layout element.

 


Was this answer helpful?

« Back

Powered by WHMCompleteSolution