YouTube Component

I wanted to use the YouTube add-on but it’s not compatible wit Vaadin 7. So i thought maybe the AbstractJavaScriptComponent could solve all of my problems.

So i thought creating a javascript which embeds swfobject would solve the problem. But this doesn’t work. I think the problem is that the ytapiplayer isn’t a valid tag…

id (String, required) specifies the id of the HTML element (containing your alternative content) you would like to have replaced by your Flash content. And i thought i solved it by setting the style name.


gui_components_YouTuber =
	var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
	swfobject.embedSWF("","ytapiplayer", "425", "356", "8", null, null, params, atts);

	function onYouTubePlayerReady(playerId) {
        ytplayer = document.getElementById("myytplayer");

    function play() {
      if (ytplayer) {

package gui.components;

import com.vaadin.annotations.JavaScript;
import com.vaadin.ui.AbstractJavaScriptComponent;

@JavaScript({“swfobject.js”, “youtubeconnector.js”})
public class YouTuber extends AbstractJavaScriptComponent
public YouTuber()



Hmm still figuring out how to do it… Main problem is that swfobject.embedSWF wants a DIV element to link to. Is it possible create something like that? I tried Document.get()… but this results in an unsatified link error…

I think full youtube player integration covers most of AbstractJavaScriptComponent use cases. Because it needs bidirectional integration. I had implemented it directly using custom event listeners. Firstly you will need to get callback from onYouTubePlayerAPIReady function, which is window function. Second step will be to sent RCP with video id. Also you could implement additional methods like onPlayerStateChange, SeekTo.

This is code where you could start developing your component.

com_example_youtube_player= function() {
var player;
var tag = document.createElement('script');
tag.src = '';
var firstScriptTag = document.getElementsByTagName('script')[0]
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var element = this.getElement();
var rpcProxy = this.getRpcProxy();
element.innerHTML = "<div id=\"player\" style=\"width: 100%; height: 100%;\ class=\"\"></div>";

 window.onYouTubePlayerAPIReady=function () {
	  player = new YT.Player('player', {

		  playerVars: {
		        'controls' : 1,
		        'wmode' : 'transparent'
	    events: {
	      'onReady': onPlayerReady
		function onPlayerReady(event) {
		 loadVideoById: function(id) {
	            if (player) {

There is documentation how to do asynchronous callbacks. But how to do it synchronous? For example get current time before loading another video?