Skip to main content

Embedding Videos

Geoff Tsai
  • Updated

Embedding videos is the process of adding the html tags to your web page so that they are able to view the videos on the website. To do this you must have the list of videos that you wish to use, and you can get these by Getting Video Recommendations

 

Embed Snippet 

The easiest way to get the embed code for your article is to get it from the API, this is done via using an mutation:

mutation CreateEmbed($input: CreateVideoEmbedInput!) {
  createVideoEmbed(input: $input) {
    id
    snippet
  }
}

You will also need to provide some variables for the mutation 

{ 
  "input": { 
    "videoIds": ["[ARRAY OF VIDEO IDS]"], 
    "type": [ENUMERATED EMBED TYPE => Single|OneByThree], 
    "keywords": ["[ARRAY OF WORDINGS USED TO SELECT VIDEO]"], 
    "articleMetadata": {
      "cmsArticleId": [CMS ARTICLE ID],
      "cmsName": [CMS DOMAIN FOR ARTICLE OR ARTICLE NAME],
      "embedLocation": [LOCATION OF THE EMBED IF KNOWN]
    } 
  } 
}

 

From the `createEmbed` mutation you will receive the HTML snippet that you can drop onto an web page and view the video. 

 

Manually Create the Code

Some CMS do not let you embed an HTML snippet, and so we also provide you the correct variables for you to be able to construct this snippet yourself. 

NOTE: this is not the recommended approach

 

HTML

The html you will need to put on the page for each location of the embedded videos is:

<div> 
  <script src="PLAYER_URL" id="oovvuu-player-sdk"></script> 
  <div data-oovvuu-embed="EMBED_ID"> 
    <amp-iframe src="FRAME_URL" width="5" height="4" sandbox="allow-scripts allow-same-origin" layout="responsive" frameborder="0" resizable >
      <div overflow placeholder>
      </div >
    </amp-iframe> 
  </div> 
</div>

 There are three variables that change in the snippet, the PLAYER_URL, EMBED_ID and FRAME_URL. These three can be received from the createEmbed mutation.

Mutation

mutation CreateEmbed($input: CreateVideoEmbedInput!) {
  createVideoEmbed(input: $input) {
    id
    snippet
  }
}

with variables:

{ 
 "input": { 
    "videoIds": ["93728"], 
    "type": ["Single"], 
    "keywords": ["Test Keyword"],
    "articleMetadata": { 
      "cmsArticleId": ["7"]
    } 
  } 
}

 

Related articles