Video Center - Embed a video on your website

Use this method if you have direct access to the HTML code of your page.

• Open the HTML file of your page: in your code editor (Visual Studio Code, Dreamweaver, etc.), open the page where you want to display the video.
• Position the cursor: place it where you want the video to appear.
• Paste the embed code: paste the code copied from Video Center.
• Save and publish: save your file and upload it to your server (FTP: File Transfer Protocol, deployment, etc.).

Example result in your HTML file:

<section class="ma-section-video">
  <h2>Ma présentation</h2>

  <iframe
    src="https://streaming.media.ovhcloud.com/vod/embed/XXXX-XXXX-XXXX"
    width="640"
    height="360"
    frameborder="0"
    allowfullscreen>
  </iframe>
</section>

Most CMSs provide a custom HTML block to insert third-party code into a page.

• Open the page editor: open the page where you want to display the video for editing.
• Add an HTML block: depending on your CMS, use the block listed below.
• Paste the embed code: paste the iframe code copied from Video Center into the HTML block field.
• Confirm and publish: confirm the insertion and publish the page.

Block to use depending on the CMS:

• Wix: Wix App > HTML Code.
• Squarespace: Block > Code.
• Webflow: Element > Embed.
• Joomla: Editor > disable the HTML filter > paste the code.
• PrestaShop: Module > Custom HTML.

WordPress natively includes a Custom HTML block in the Gutenberg editor. No plugin is required.

• Open the page or post: from your WordPress dashboard, open the page or post for editing.
• Add a Custom HTML block: click + to add a block, then search for and select Custom HTML.
• Paste the embed code: paste the iframe code copied from Video Center into the HTML block.
• Preview: click Preview to check the rendering before publishing.
• Publish: click Update or Publish.

Adjust the width and height attributes in the iframe code:

<!-- Standard fixed size (16:9) -->
<iframe src="..." width="640" height="360" ...></iframe>

<!-- Larger size -->
<iframe src="..." width="1280" height="720" ...></iframe>

<!-- 100% of the container width -->
<iframe src="..." width="100%" height="400" ...></iframe>

Wrap the iframe in a CSS container for fluid rendering across all screen sizes:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    src="https://streaming.media.ovhcloud.com/vod/embed/XXXX-XXXX-XXXX"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

Remove the allowfullscreen attribute if you want to prevent full-screen mode:

<iframe src="..." width="640" height="360" frameborder="0"></iframe>

Depending on the cause:

• The embed URL is incorrect: go back to Video Center and copy the embed code again.
• The video is still being processed: wait for encoding to finish in Video Center before embedding it.
• The CMS filters iframes: enable iframe authorisation in its settings.
• The site is in HTTPS but the embed URL is in HTTP: check that the URL in the iframe starts with https://.

Some browsers block autoplay with sound. Manual playback (clicking Play) works as expected.

Use the responsive technique described in the Customising the embedded video player section above with the relative CSS container.

Go to Settings > Reading in WordPress and check that external iframes are not blocked. Some security plugins (Wordfence, iThemes Security) may filter iframes.