Instead of just posting a plain link, the Open-Graph tags and Twitter cards provide us with a cool option to embedding Kaltura videos player directly with the entry video, description and title.

 Lets Begin with Twitter Cards 

Twitter Cards can be used for all kinds of web content, from blog posts and news articles, to videos and more. It is designed to give the reader a preview of the content before clicking through to your website.

The Twitter Cards require the following Meta tags that contain information about your content and site, in the following form:

name – The name of the property

content – The value of the name property

<meta name="twitter:card" content="player" />

<meta name="twitter:site" content="@panda-os" />

<meta name="twitter:url" content="https://cdnapisec.kaltura.com/...." />

<meta name="twitter:player" content="https://cdnapisec.kaltura.com/.... " />

<meta name="twitter:image" content="https://cdnapisec.kaltura.com/.... " >

<meta name="twitter:title" content="Panda-OS Open Source Solutions" />

<meta name="twitter:description" content="PandaOS is a freelance open-source software development and consulting agency.&nbsp;We&nbsp;specialise&nbsp;in web applications, online video, CMS, and more!" />

<meta name="twitter:player:width" content="560" />

<meta name="twitter:height" content="395" />

Twitter Cards Additional Remarks

• The Twitter Card Validator Tool and Twitter Card Types, the Validator tool provides a glimpse of the number of meta tags that have been rendered.

• You can find the source content of your entry url/player  in the KMC under preview and embed. 

• Twitter requires an https prefix for your url/player/image content source such as:

  “https://cdnapisec.kaltura.com”

• In some cases when using the Validator Tool you will need to request an approval for your player, the approval procedure may take couple of days.

 Lets continue with Facebook Open-Graph

People use stories to share the things they’re doing, the people they’re doing them with and the places where they happen. Let people share stories about your app on Facebook through a structured, strongly typed API. Open-Graph supports embedding videos, blogs, articles and more then Twitter.
Facebook provides custom options embedding your content on iOS, Android, Web Apps and more.

The Open-Graph requires the following Meta tags that contain information about your content and site, in the following form:

property – The name of the property

content – The value of the property

<meta property="og:type" content="video" />

<meta name="og:video:type" content="text/html" />

<meta name="og:site" content="@panda-os" />

<meta name="og:video:url" content="http://cdnapi.kaltura.com/...." />

<meta name="og:video:secure_url" content="https://cdnapisec.kaltura.com/.... " />

<meta name="og:image" content="https://cdnapisec.kaltura.com/.... " >

<meta name="og:title" content="Panda-OS Open Source Solutions" />

<meta name="og:description" content="PandaOS is a freelance open-source software development and consulting agency.&nbsp;We&nbsp;specialise&nbsp;in web applications, online video, CMS, and more!" />

<meta name="og:player:width" content="560" />

<meta name="og:player:height" content="395" />

Facebook Open-Graph Additional Remarks

• The Facebook Debugger Tools and Facebook Open-Graph Protocol, unlike the Twitter validator tool, Facebook debugger tool provides us much more information about our page with an explanation of each meta tag that has been rendered, including warnings that should be fixed and more.

• You can find the source content of your entry url/player  in the KMC under preview and embed. 

• Facebook requires an https prefix for your url/player/image content source such as:

  “https://cdnapisec.kaltura.com”

• In some cases when using the Debugger Tool, you will need to request an approval for your player, the approval procedure may take couple of days.

There are quite few more options for embedding and rendering your content, we reviewed the 2 most common ones : )

for more detailed explanations and questions please feel free to contact us at info@panda-os.com or in the comments.