Skip to content

Embed on your site

Embedding puts your OhPlayer video on your own web page with a short piece of code.

Get the code

Open the video in the Studio, click Share, and under Embed click Copy embed. Always copy the code from there. It contains your video’s ID and the right address.

There are two kinds.

Script (default)
A div and an async script. It fits the width of its container, keeps a 16:9 shape, and supports everything OhPlayer can do.
iframe
A single iframe for sites that do not allow scripts.

The script code looks like this. The parts in angle brackets are filled in for you when you copy it.

<div id="studio_embed_<VIDEO_ID>" class="ohplayer-embed-host" style="width:100%;position:relative;aspect-ratio:16/9"></div><script async src="<PLAYER_ADDRESS>/embed.v2.js" data-video="<VIDEO_ID>"></script>

The iframe code looks like this:

<iframe src="<PLAYER_ADDRESS>/v/<VIDEO_ID>" title="OhPlayer video" loading="lazy" allow="autoplay; fullscreen; picture-in-picture" style="width:100%;aspect-ratio:16/9;border:0"></iframe>

Paste it on your site

Paste the code into a block that accepts raw HTML. Keep the div and the script together, with the div first. Then publish or update your page. The names of these blocks change from time to time, so look for an option called HTML, Embed or Custom code.

  1. Edit the page or post.
  2. Add a Custom HTML block.
  3. Paste the script code and save.
  4. Update the page and view it while signed out.

WordPress removes scripts for some user roles. If the video does not show, ask an administrator to add the block, or use the iframe code.

  1. Open the page in the Designer.
  2. Add an Embed element where the video should go.
  3. Paste the script code into it and save.
  4. Publish your site.
  1. Open the page in Framer.
  2. Add an Embed component (the HTML option) where the video should go.
  3. Paste the script code into it.
  4. Publish your site.

If the component does not run the script, switch to the iframe code.

  1. In the theme editor, open the page or product template.
  2. Add a Custom Liquid section or block.
  3. Paste the script code and save.

If the block strips the script, use the iframe code.

Size and layout

The player is always 16:9 and as wide as its container. To make it smaller, put it inside a container with a fixed or maximum width. Set Frame to Fit or Fill in Playback settings to choose how a video of a different shape sits in the frame.

Only one player per video works on a page. If you paste the same video twice, the second one does not load. Different videos on the same page are fine.

Why script is the better choice

The iframe code works, but it loses things that need your page:

  • Ad tracking. The player cannot see the ad click ID in your page address, so gclid and fbclid are not recorded. Ad pixel events (GA4, Meta and Google Tag Manager) cannot reach the pixels on your page.
  • Checkout tagging. Sales tracking cannot tag links on your page.
  • HTML reveals. A Page selector cannot unhide elements on your page. Only the box under the player works, and it is limited to the height of the iframe.

See Ad pixel events and Track sales per video.

If your site uses a content security policy

A content security policy (CSP) can block the player. Allow these:

  • The player address from your code (<PLAYER_ADDRESS>) for scripts, connections and, with the iframe code, frames.
  • The video address cdn.ohplayer.com for video, images and captions.

Who can embed

OhPlayer has no allowed-domains setting. Anyone who has your embed code can show your published video on their site. Do not publish a video you do not want shared.

The player stores a viewer ID in a cookie and in local storage on your page, and remembers where a viewer stopped. It shows no consent banner on your site. Cover it in your own cookie notice. See Data, privacy and cookies.

If the video does not show

  • Check that the div comes before the script, and that the code was not changed. Copy it again from Share.
  • Check that your editor allowed the script. If not, use the iframe code.
  • Look for a content security policy that blocks the addresses above.
  • Make sure the video is published. If you see a message instead of the video, see What your viewers see.

Next steps

Publish and share
Publish changes and copy your code

What your viewers see
Player controls and error messages

HTML reveals
Show your own content at a chosen time

Was this page helpful?

Your answer stays in your browser. Nothing is sent to us or to anyone else.