If publishers wish to embed videos without placing an Oovvuu script on their page, they can embed videos using and iframe. As there are no 'third-party' (IE Oovvuu) scripts on the page, that means that they can be used where a publisher has internal policies that restrict or prohibit the use of those types of scripts.
However there are some functional limitations that using this method creates that need to be considered:
- Whilst any of Oovvuu's player experience can be embedded in an iframe, we would recommend that only those experiences with a static aspect ratio be used in an iframe, as the ratio of the iframe won't change even if the size of its content changes. (Currently single player, and multiplayer embeds.)
- For the player to float, the publisher would need to implement the necessary scripting and css on their page to recognise that the iframe has scrolled out of the viewable window and reposition it. (With standard embeds the floating player is enabled out of the box)
- The Oovvuu player experiences are independant of each other and cannot interact when multiple players are on the page. That means that, for instance, if a user starts playing a second video whilst one is already playing they will play concurrently, rather than with standard embeds where the first video will automatically be paused when another is played.
Where a publisher has decided to use iframes, a statically sized iframe can be constructed using the oovvuu embed code as per this example, varying the width and height as desired:
<iframe src="https://playback.oovvuu.media/frame/<insert embed id here>"
width="675" height="425" frameborder="0">
</iframe>
Where the iframe size needs to be responsive then standard methods can be used to create that effect:
<div style="padding-top: 62.5%; width:100%; position:relative; overflow:hidden;">
<iframe src="https://playback.oovvuu.media/frame/<insert embed id here>"
width=100% height=100% frameborder="0" style="top:0; position:absolute">
<div overflow placeholder></div>
</iframe>
</div>
Depending on the type of player, where the aspect changes slightly due to metadata being displayed below the player then the "padding-top" value may be expressed as a calc to ensure there is no internal iframe scrolling when displayed on the page. For example:
padding-top: calc(45% + 100px)
An example page of our other players using responsive iframes is available at: https://demo.cms.oovvuu.com/example-embeds-using-iframes/