OKVideo two videos in one page differect sections

Question

Ok so I've done alot of digging and can't find any info on this. I'm trying to get the jquery plugin OkVideo to make 2 "section" tags have a different video in each however even if i rename the container to be specifically ID'd the video loads in one container.

e.g.

<section>
    <div id="container1"></div>
</section>
<section>
    <div id="container2"></div>
</section>

$('#container1').okvideo({
    source: 'Video1 Url',
    volume: 0,
    loop: true,
    hd: false,
    adproof: true,
    annotations: false
});
$('#container2').okvideo({
    source: 'Video2 URL',
    volume: 0,
    loop: true,
    hd: false,
    adproof: true,
    annotations: false
});

Now the above is causing the 2nd video to overwrite the first video in it's container. Which is not the desired effect. Can someone suggest a similar plugin that allows this or an overwrite to get this to work without recoding half of the plugin javascript?

Answer 1

Right so after a few hours of fighting I finally fixed this by rejigging the okfocus okvideo to take an extra option "newtarget" which identified if there where multiple videos on the page.

if (base.options.newtarget == undefined) {
     base.options.newtarget = "";
}

var target = $("#" + base.options.newtarget) || base.options.target || $('body');
var position = target[0] == $('body')[0] ? 'fixed' : 'absolute';

All items being added to the page had the newtarget appended to the id e.g.

target.append('<div id="okplayer' + base.options.newtarget + '" style="pos.....

Then we add the options to the window data setting each option setting to take the newtarget as part of its naming convention(please ensure to format it in lowercase and strip extra '-' etc.)

$(window).data('okoptions' + options.newtarget.replace('-', '').toLowerCase(), base.options);

Then locate the function onYouTubePlayerAPIReady() or if vimeo's vimeoPlayerReady() and extended it with a class selector for the videos on the page

 $(".videoClass").each(function(e) {
 options = jQuery(window).data('okoptions' + $(this).attr('id').replace('-', ''));....

once these have been added you add an unobtrusive function to add all the options

 var collection = $(".videoClass");
 collection.each(function () {
 $("#" + $(this).attr('id')).okvideo({
        source: $(this).attr("data-link"),
        volume: 0,
        loop: true,
        hd: false,
        adproof: true,
        annotations: false,
        newtarget: $(this).attr('id')
        });
 });

This could probably be neatened up but as I was in a rush the is this working solution.