Editor - Embed Video in IE

6 posts, 0 answers
  1. Joe
    Joe avatar
    5 posts
    Member since:
    Jan 2013

    Posted 20 May 2013 Link to this post

    I'm using a version of the Insert Video snippet from another forum post that makes use of the Editor's "insertHtml" function to embed videos. It works great in most browsers. However, in IE9, the video is always inserted at the beginning of the text instead of where the cursor is. Is there anything I can do about this?

    Here's the relevant code snippet

    <script type="text/x-kendo-template" id="insertVideo-template">
            <label for="videoUrl">Enter a Share URL from YouTube:</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>
    <script type="text/x-kendo-template" id="youTube-template">
        <iframe width="458" height="315" src="http://www.youtube.com/embed/#= source #?wmode=opaque&rel=0" frameborder="0"></iframe>
    function insertVideo(e) {
        var editor = $(this).data("kendoEditor");
        var dialog = $($("#insertVideo-template").html())
            .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 }) });
            .click(function() {
                modal: true,
                title: "Insert Video",
                animation: false,
                deactivate: function() {
    // Check inserted URL for valid Media Link
    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;
        if (success) {
            return media;
        } else {
            alert("No valid media id detected.\nBe sure to use the \"Share\" url, located in the menu under the video on the youtube page.");
        return false;
        encoded: false,
        tools: [
            { name: "insertVideo", tooltip: "Embed Youtube Video", exec: insertVideo },
  2. Alex Gyoshev
    Alex Gyoshev avatar
    2513 posts

    Posted 22 May 2013 Link to this post

    Hello Joe,

    The problem is caused by a limitation of IE -- the browser does not remember the caret position after another element has been focused. Therefore, you need to save the selection prior to focusing the input and restore it before inserting the video content. Here is a jsBin sample that shows the approach. The next official release in July will solve this problem automatically.

    Alex Gyoshev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 18 Oct 2016 Link to this post

    Sorry to resurrect an old post, but how would this work with the MVC5 video tag? IE:

    <video><source src="@Url.Content(Model.VideoTable.VideoPath)" type='video/mp4' /></video>

    Or using this demo: http://www.strathweb.com/2013/01/asynchronously-streaming-video-with-asp-net-web-api/

    I really wish the Editor had the ability to insert a video. WordPress has it and it's extremely easy to use.

  4. Ianko
    Ianko avatar
    1729 posts

    Posted 20 Oct 2016 Link to this post

    Hello Andrew,

    There is no such feature at the moment and you can suggest your idea by posting it in the Kendo Feedback portal

    Also, you can create a tool that does that by following the guidelines from this how-to article: http://docs.telerik.com/kendo-ui/controls/editors/editor/how-to/insert-html-via-custom-popup-tool

    Telerik by Progress
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
  5. Sreekanth
    Sreekanth avatar
    6 posts
    Member since:
    Sep 2014

    Posted 12 Apr in reply to Alex Gyoshev Link to this post

    Hi Telerik Admin,

    We are using Kendo.Mvc.dll with version 2017.1.223. But still issue with IE exists. Any update when this will be fixed or any alternate solutions?



  6. Ianko
    Ianko avatar
    1729 posts

    Posted 13 Apr Link to this post

    Hello Sreekanth,


    If you refer to the behavior where inserting the embed video is always inserted at the beginning of the text,  this is IE behavior and there is no technical approach to solve that. As this is a custom tool with a custom dialog, this is a matter that should be handled in the code of the custom tool you are using. 


    The way to solve that is demonstrated by Alexander in his post. Take a look at the jsBin link provided. 


    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top