Embedding a video in a website:

You can embed videos in two ways.

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

  • Popover Embed - Helps play the video over the content on the webpage 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 webpage

  • 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.
    NoteClick here to learn how to record a video. 

  1. To choose an existing video, click on Library icon from the left navbar. 

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

  1. In the video preview page, click on Publish Video Embed from the center pane.

  2. Click on Inline Embed/Popover Embed

Inline Embed

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

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

  3. 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.

  4. 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 click here

  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. Once you’re done, click COPY CODE and navigate to the appropriate webpage.

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

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

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

  6. 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.

Popover Embed:

  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.

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

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

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

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

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


Note: To learn how to add an in-video meeting link, click here.


*****************************************************************************

FAQ: 

  • Why my CTA link is not working on my website

When you embed a video with an iframe on your website, the specific script tag will be removed automatically and because of that Hippo Video gets access only to that iframe. This restricts the meeting link (CTA) to show on the full screen or in some cases, the CTA button may not work. To fix this issue, you need to add the below scripts to your website page which enables Hippo Video to make the CTA show in full screen.


<script>window.hippoEmbedSeo = "9bd30585-873b-475a-baac-5142c3d9ac14.json";</script><script src="https://hippo-embed-scripts.s3.amazonaws.com/video-delivery-embed.js" async></script><script>window._hippo_cx_domain = "https://www.yourhippovideosubdomain.io";var hippo_script=document.createElement("script");hippo_script.src="https://hippo-embed-scripts.s3.amazonaws.com/video-embed-mh.js";document.body.appendChild(hippo_script);</script>


Note: Please change the “_hippo_cx_domain in the below code if you use subdomain or customdomain in hippovideo”. e.g https://example.hippovideo.io



If the same issue occurs, please contact us at support@hippovideo.io