API Documentation: Media Embedding

Embedding Media

<iframe src="https://www.wellcomemat.com/embed/$id" width="$width" height="$height" frameborder="0" scrolling="no"></iframe>

Notes:

1. $id is a unique identifier for the video, typically the hash property of media objects.
2. Additionally, you can embed a video using a listing id by using customid=$customid&userid=$userid as the $id.
   Both fields are required to correctly identify a video. If you have videos under more than one account, you will need to provide the correct userid for each one.
3. Details for both hash and customid can be found in our sample response.
4. The universal embed code supports desktop computers, tablets, and smartphones. You should make sure to preserve the frameborder="0" and scrolling="no" attributes to prevent any legacy browsers from incorrectly displaying your media.
5. To embed a hero player that will continually play without volume or controls, simply use the parameter hero=1 and set your iframe's width and heigth to 100%

Viewing Media

You can watch a video by going to its landing page, viewable at:

https://www.wellcomemat.com/video/$hash

16:9 Calculator

Your player should be embedded at a 16:9 aspect ratio so that your video is not all stretchy and gross. You could do that manually, if you're into that, or you can use our calculator.

Making the player responsive

Use this bit of code to make your video respond to all page widths. Notes:

• Requires jQuery
• Player should take up 85% of the width of the window. You can change this by adjusting 'width'.
• Assumes player iframe has id 'player'

$(function() {

    width = .85;

    // Define end of window resize event.
    $(window).resize(function() {
        if (this.resizeTO)
            clearTimeout(this.resizeTO);

        this.resizeTO = setTimeout(function() {
            $(this).trigger('resizeEnd');
        }, 500);
    });

    // Now resize player on this event.
    $(window).bind('resizeEnd', resizePlayer);

    // Set initially.
    resizePlayer();

    // Set player height based on window width.
    function resizePlayer() {
        var w = parseInt($(window).width() * width),
        h = parseInt(w * 9 / 16);

        // Set dimensions and reload.
        $('#player').width(w);
        $('#player').height(h);
        var player = document.getElementById('player');
        player.src = player.src;
    }
});