Greetings to everyone!
As title says I'm trying to create custom tool - button to embed YouTube video.
The way it supposed to work - you click button - dialog appears - you insert video URL and it then add youtube iframe embed code into editor. At this moment I expect to see iframe in editor and iframe should show video.
I have most of this done, but last step do not work properly. iframe is added correctly, but video wont load. I get JS error saying "ReferenceError: yt is not defined". It looks like that JS file with YouTube API wont load properly.
Any help will be greatly appreciated.
Here is HTML code (make sure to add Script and CSS references to Kendo and jQuery)
As title says I'm trying to create custom tool - button to embed YouTube video.
The way it supposed to work - you click button - dialog appears - you insert video URL and it then add youtube iframe embed code into editor. At this moment I expect to see iframe in editor and iframe should show video.
I have most of this done, but last step do not work properly. iframe is added correctly, but video wont load. I get JS error saying "ReferenceError: yt is not defined". It looks like that JS file with YouTube API wont load properly.
Any help will be greatly appreciated.
Here is HTML code (make sure to add Script and CSS references to Kendo and jQuery)
<body> <h2>Kendo Editor Example</h2><textarea cols="20" id="Description" name="Description" rows="5" style="width:600px; height:400px"></textarea><script> jQuery(function(){jQuery("#Description").kendoEditor({tools:[{name:"bold"},{name:"italic"},{name:"createLink"},{name:"unlink"},{name:"Insert Video",tooltip:"Insert Video",exec:insertVideo},{name:"insertImage"},{name:"insertUnorderedList"},{name:"formatBlock"}]});});</script><script type="text/x-kendo-template" id="insertVideo-template"> <div> <label for="videoUrl">Enter a URL from YouTube or Vimeo:</label> <input type="text" id="videoUrl" name="videoUrl"/> <div class="insertVideo-actions"> <button class="k-button insertVideo-insert">Insert</button> <button class="k-button insertVideo-cancel">Cancel</button> </div> </div></script><script type="text/x-kendo-template" id="youTube-template"> <iframe class="youtube-player" type="text/html" width="560" height="315" src="http://www.youtube.com/embed/#= source #?fs=1&feature=oembed&wmode=transparent" frameborder="0" allowfullscreen></iframe></script><script> function insertVideo(e) { var editor = $(this).data("kendoEditor"); var dialog = $($("#insertVideo-template").html()) .find(".insertVideo-insert") .click(function () { var media = testUrlForMedia(dialog.element.find("input").val()); if (media) { var template = kendo.template($("#youTube-template").html()); editor.exec("insertHTML", { value: template({ source: media.id }) }); } dialog.close(); }) .end() .find(".insertVideo-cancel") .click(function() { dialog.close(); }) .end() .kendoWindow({ modal: true, title: "Insert Video", deactivate: function() { dialog.destroy(); } }).data("kendoWindow"); dialog.center().open(); } function testUrlForMedia(pastedData) { var success = false; var media = {}; if (pastedData.match('http://(www.)?youtube|youtu\.be')) { if (pastedData.match('embed')) { youtube_id = pastedData.split(/embed\//)[1].split('"')[0]; } else { youtube_id = pastedData.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0]; } media.type = "youtube"; media.id = youtube_id; success = true; } else if (pastedData.match('http://(player.)?vimeo\.com')) { vimeo_id = pastedData.split(/video\/|http:\/\/vimeo\.com\//)[1].split(/[?&]/)[0]; media.type = "vimeo"; media.id = vimeo_id; success = true; } else if (pastedData.match('http://player\.soundcloud\.com')) { soundcloud_url = unescape(pastedData.split(/value="/)[1].split(/["]/)[0]); soundcloud_id = soundcloud_url.split(/tracks\//)[1].split(/[&"]/)[0]; media.type = "soundcloud"; media.id = soundcloud_id; success = true; } if (success) { return media; } else { alert("No valid media id detected"); } return false; }</script>4 Answers, 1 is accepted
0
Hi Alex,
The reason why you experience such difficulties in playing the YouTube video from the Kendo Editor, is because you get nested iframes:
In order to play the video, you just have to submit the Kendo Grid value to page where you will show it, or in some element, outside the Kendo Grid.
I have prepared a small example project, where you can test the above.
All the best,
Vladimir Iliev
the Telerik team
The reason why you experience such difficulties in playing the YouTube video from the Kendo Editor, is because you get nested iframes:
- Kendo Editor text area is an iframe
- YouTube embedded code is an iframe.
In order to play the video, you just have to submit the Kendo Grid value to page where you will show it, or in some element, outside the Kendo Grid.
I have prepared a small example project, where you can test the above.
All the best,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Alex
Top achievements
Rank 1
Rank 1
answered on 22 Aug 2012, 09:26 AM
Thanks for your reply. I've checked example you have provided. Unfortunately the way you "resolved" it do not work for me actually.
I really need it to be playable "inside" Kendo Editor, not in some other place of page.
Are you saying this is not possible?
Maybe there is some workaround to make it playable inside this nested iframe?
Any help in making it working will be appreciated. Thanks!
I really need it to be playable "inside" Kendo Editor, not in some other place of page.
Are you saying this is not possible?
Maybe there is some workaround to make it playable inside this nested iframe?
Any help in making it working will be appreciated. Thanks!
0
Accepted
Hi Alex,
Vladimir Iliev
the Telerik team
We have implemented workaround for FireFox in our latest internal build of KendoUI Editor. You can find the latest internal build in the attached files in the support ticket you have opened.
After installing the new version, you can play videos inside the Editor in all major browsers.
I hope this helps.
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Alex
Top achievements
Rank 1
Rank 1
answered on 04 Sep 2012, 11:49 AM
Internal build works perfectly in FireFox. Thanks