Many channel owners want to use dartfish.tv content on their own websites. This can be achieved via video embed code. Basically, it’s a snippet of code that you put on your website that displays as a video player. An embed code pulls the video content from the original source, allowing you to display a video without having to actually host the files on your website.


Requirements

Embedding will require some dartfish.tv options to be enabled on the channel depending on the content that is embedded. Contact the channel administrator for more information about those options

  • Embedding of a given public video:
    • No requirements
  • Embedding of a given private video:
    • Channel option “Private embedding”
    • Whitelisting of the domain in which the dartfish.tv content is embedded
  • Embedding of a video or playlist resulting of a keyword filtering:
    • Channel option “Private embedding”
    • Whitelisting of the domain in which the dartfish.tv content is embedded
    • Channel option “dartfish.tv API”

Embedding of a given public or private video

To embed a given video in a website, find the URL of the video you want to embed and extract the CR section. This section includes three parameters (p, c and m). See the below example:

E.g.: https://dartfish.tv/Videos?CR=p154908c399545m7731057&br=1


On the website, enter the following code


<div style="position:relative;padding-bottom:calc(56.25% + 16px);">
<div style="position:absolute;inset:0;">
<iframe src="https://dartfish.tv/Embed?{ YOUR PARAMETER HERE }" width="100%" height="100%" allowfullscreen></iframe>
</div>
</div>


Then, replace {YOUR PARAMETER HERE} by the CR section. 


<div style="position:relative;padding-bottom:calc(56.25% + 16px);">
<div style="position:absolute;inset:0;">
<iframe src="https://dartfish.tv/Embed?CR=p154908c399545m7731057" width="100%" height="100%" allowfullscreen></iframe>
</div>
</div>


By default, the video player will have a 16/9 aspect ratio and adjust to the space available in the test frame. To apply a fixed size, set values in the width and height parameters (e.g. width="640px" height="360px")

Embedding of content resulting of a keyword filtering

Instead of embedding a given video, it is also possible to embed a video or playlist that is the result of a filtering. This is done by combining the embedding with the Smart Links. To learn more about Smart Links, check the page https://api.dartfish.tv/


Smart Links allow to build basic and readable links to dedicated dartfish.tv content, e.g. create a link that diisplay all events where the event Goal is scored by Player A. A Smart Link consist of a base url and query parameters. In the below Smart Link example, the base url is highlighted in green and the query parameters are highlighted in yellow:


http://www.dartfish.tv/SmartLink? channelId=1&KW1_1=Athlete&KW1_2=Bob&KW2_1=Discipline&KW2_2=LongJump


Copy the query parameters into the embedding code to embed a Smart Link


<div style="position:relative;padding-bottom:calc(56.25% + 16px);">
<div style="position:absolute;inset:0;">
<iframe src="https://dartfish.tv/Embed?channelId=1&KW1_1=Athlete&KW1_2=Bob&KW2_1=Discipline&KW2_2=LongJump" width="100%" height="100%" allowfullscreen></iframe>
</div>
</div> 


This code will embed a playlist of events with all “LongJump” from “Bob” in the channel “1”


A Smart link can result in three different types of outcomes depending on the target parameter (cf. Smart Links documentation: video, event and eventplaylist). As embedding only applies to the video player and not the library:

  • Embedded Smart Links with the target parameter set to video will open the most recent video resulting from the query parameters
  • Embedded Smart Links with the target parameter set to event will open in a playlist


Other dartfish.tv connectivity tools

For referring to other dartfish.tv connectivity tools read this article.