Requirements:
Hippo Video Account. Sign-up here if you are a new user. 

Embedding a video in a website can be done in two ways.

  • Inline Embed - Helps play the video directly on the website i.e. inline with your content.

  • Popover Embed - Helps play the video over the content on the website i.e. the video plays in a popup window when you click on the thumbnail.

Advantages of using,

  1. Inline Embed:

  • Set video size

  • Set the video to be responsive (resize accordingly)

  • Update SEO metadata (Search engine indexing)

  1. Popover Embed:

  • Occupies less space in the website

  • Attracts the customer to explore the video (blurs the background)

  • Update SEO metadata (Search engine indexing)

To embed a video as inline/popover

  1. Login to Hippo Video with your existing credentials.

  2. You can either record a new video or embed an existing one.

Note: To record a video, please check out the link https://help.hippovideo.io/support/solutions/articles/19000112667-recording-a-new-video

  1. To choose an existing video, click on Library tab on the top. 

  2. Click on All Videos and then select the video of your choice. 

  3. In the video preview page, click on Publish Video from the tab on right and then click Embed.

  4. Click on Inline Embed/Popover Embed

  5. If you select Inline Embed, then you will have an option to modify the video size of your choice. 

    1. By default, the video size will be set as 720.

    1. Select Custom Size, to set the height and width of your choice.

    2. Select Responsive, to render well on a variety of devices and windows or screen sizes, whether it is a desktop, a laptop, a tablet, or a mobile phone.

  1. Check Use oEmbed URL box, to embed the video in Wordpress (this is applicable only for Wordpress). 

Note: To paste the oEmbed URL in Wordpress, please check out the link https://help.hippovideo.io/support/solutions/articles/19000081576-wordpress-with-hippo-video.

  1. Check Push video metadata to the page for all search engines to index box, to index your videos in SEO during search (any search engine).

  2. The sample Inline embed code looks like this,

  1. Once you’re done, click COPY CODE and navigate to the appropriate webpage.

  2. Now, paste the copied code in the desired HTML editor of the webpage i.e. in the backend. 

  3. You will notice that the video gets pasted in the webpage along with your content.

https://hippovideo2qoqo3.hippovideo.io/video/play/RXs7Zxs1cLR2gb3k_iMSfo7rtxFlWKaIBzOESNxTOBo?utm_source=hv-campaigns&hreferer=private&_=1590507891087&

Watch Video

  1. Now, click . The video will play directly on the webpage where it’s embedded.

  2. You can always enter the full screen mode by clicking at the bottom of the player and press Esc button from your keyboard, to exit full screen mode.

  3. If you select Popover Embed, then you will have an option to display the link as any one of the following method,

    1. Thumbnail - Set width and height & check Responsive (to make the video get resized automatically based on your webpage space availability). 

    2. Text - Enter the text to refer to this video.

  1. The sample Popover embed code looks like this,

  1. Once you’re done, click COPY CODE and navigate to the appropriate webpage.

  2. Now, paste the copied code in the desired HTML editor of the webpage i.e. in the backend.

  3. You will notice that the video gets pasted in the webpage as a thumbnail image along with the content.

  4. Now, click  which appears on the thumbnail image. The video will play within the pop-up box. 

https://hippovideo2qoqo3.hippovideo.io/video/play/9IKRPRruatkgQcpxrvgG99euFJB5oubCcfbVFNxFmG4?utm_source=hv-campaigns&hreferer=private&_=1590644109989&

Watch Video

  1. Then, click  on the top-right corner of the pop-up box, to exit/close.