Navigation :

Script embed

VideoKen can integrate with an existing Youtube embed seamlessly.

Let’s say, you have embedded the following YouTube video in your page as per the official embed guide, and has built some custom functionality to interact with the player.

Your embed code should look something similar to

<iframe id="player" width="720" height="480" src="https://www.youtube.com/embed/LWw94LVhfLk?enablejsapi=1" allow="autoplay">
</iframe>
<script>
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";

    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
        events: {
            'onReady': function(event) {
                // Any custom player logic
            }
        }
        });
    }
    </script>
</body>

To add VideoKen controls, you just need to make 3 changes

Wrap the iframe in a container div, giving the position as relative or absolute, also matching the width and height of the video
Include the VideoKen script before the YouTube setup script
Inside the YouTube ready handler, call the function setupVkenControls passing the container element, the player object and any custom options you want to pass to the videoken controls. The complete list of options can be found here. Note the option value must be passed as a string as given in the example below.

The VideoKen integrated code should look as below

<div id="container" style="position: relative; width: 720px; height: 480px;">
    <iframe id="player" width="720" height="480" src="https://www.youtube.com/embed/ixAutqVAxO8?enablejsapi=1" allow="autoplay">
    </iframe>
</div>
<script src="https://content.videoken.com/players/youtube-script.js"></script>
<script>
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";

    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
        events: {
            'onReady': function(event) {
                setupVkenControls(player, document.getElementById('container'),
                { navigator: '0' });
                // Any custom player logic
            }
        }
        });
    }
</script>

That’s all you need to do for integrating with VideoKen. Any custom functionality you have built on the player will continue to work.