Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Displaying youtube video

I just purchased Pro and are experimenting with displaying a video.
Using your Vemo example I tried this and some minor variations but couldn't get it to work.
Tipped.create('.WorkstationManagement', {ajax: {
url: 'http://www.youtube.com/v/4QPQSBr-zf4?version=3',
success: function(data, textStatus, jqXHR) {
return {content: data.html
};
}
},
close: true,
hideOn: false,
skin: 'light',
radius: false,
position: 'topleft'
});
What is the basics to display a video if the link is known.

Thanks,
Scott

Comments

  • edited December 2015
    The vimeo example uses a JSON response from an oEmbed endpoint to populate a tooltip. I know that youtube doesn't support JSON because their oEmbed endpoint doesn't support callbacks (yet).

    https://code.google.com/p/gdata-issues/issues/detail?id=4329

    You can't insert a youtube link as your ajax url and expect it to return data, that won't work because of cross domain restrictions. This is what JSON solves.

    The JSON response basically returns some markup with an iframe. Since you can't use JSON/Ajax with Youtube another way to embed a video is to simply insert an iframe directly using HTML.

    https://developers.google.com/youtube/player_parameters
  • First off, I'm using a software package that generates the webpage I'm trying to get tipped.
    The field I'm tipping has a span id of el#_tblKnowledge_VideoNugget where the # is a number incremented for each row.
    I was able to gather enough code after googling to get the YouTube to work. I am by no means an experienced coder but it works(somewhat)
    the issue is that after hovering and closing around 10 videos, there are a lot of leftover div's with a class of "tpd-tooltip tpd-skin-dark tpd-size-large tpd-no-radius tpd-has-inner-close" I can refresh the page and it works fine again for a while.
    Here is the code if you have any helpful tips:


    //Loads the youtube iFrame api
    var tagg = document.createElement('script');
    tagg.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tagg, firstScriptTag);

    $(document).ready(function(){
    window.onmouseover = function(e) {
    var elm = e.target;
    if (elm.tagName=="TD" && elm.firstElementChild.id.match(/_tblKnowledge_VideoNugget/)) {
    var elementNumber = elm.firstElementChild.id.match(/\d+/); //Cell element eg. el2_tblMsCertifications_zUserId returns 2
    if ($('#el'+elementNumber+'_tblKnowledge_YouTubeVideo').text().replace(/^\s+|\s+$/g, '')=='Yes') { //it is a youtube video
    var youTubeId = $('#el'+elementNumber+'_tblKnowledge_VideoId').text().replace(/^\s+|\s+$/g, '');
    var tipElement = '#'+elm.firstElementChild.id.replace(/^\s+|\s+$/g, ''); //Cell element eg. el1_tblMsCertifications_zUserId

    //Create the div to hold the video
    var iDiv = document.createElement('div');
    iDiv.id = 'player'+elementNumber;
    document.getElementsByTagName('body')[0].appendChild(iDiv);

    var player;
    player = new YT.Player('player'+elementNumber, {
    height: '320',
    width: '320',
    videoId: youTubeId
    });
    $('#player'+elementNumber).hide();//hides the element where the video is created.
    Tipped.create(tipElement, {
    inline: 'player'+elementNumber,
    showOn: 'focus mouseover',
    skin: 'dark',
    close: true,
    hideOn: false,
    hideOthers: true,
    detach: false,
    radius: false,
    padding: false,
    position: 'bottom',
    size: 'large',
    cache: false,
    afterHide: function() {
    $('#player'+elementNumber).remove();
    }
    });
    }
    }
    }
    window.onmouseout = function(e) {
    var elm1 = e.target;
    if (elm1.tagName=="TD" && elm1.firstElementChild.id.match(/_tblKnowledge_VideoNugget/)) {
    var elementNumber = elm1.firstElementChild.id.match(/\d+/);
    if ($('#el'+elementNumber+'_tblKnowledge_YouTubeVideo').text().replace(/^\s+|\s+$/g, '')=='Yes') {
    $('#player'+elementNumber).remove();
    }
    }
    }
    });


    Thanks,
    Scott
Sign In or Register to comment.