Editor - Embed Video in IE

[Joe]

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">
    <div>
        <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>
        </div>
    </div>
</script>

<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>
</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",
            animation: false,
            deactivate: function() {
                dialog.destroy();
            }
        }).data("kendoWindow");

    dialog.center().open();
}

// 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;
}

$(".fnRichTextField").kendoEditor({
    encoded: false,
    tools: [
        "bold",
        "italic",
        "underline",
        "separator",
        "fontName",
        "fontSize",
        "foreColor",
        "backColor",
        "separator",
        "insertUnorderedList",
        "insertOrderedList",
        "separator",
        "justifyLeft",
        "justifyCenter",
        "justifyRight",
        "justifyFull",
        "separator",
        "createLink",
        "unlink",
        "separator",
        { name: "insertVideo", tooltip: "Embed Youtube Video", exec: insertVideo },
        "viewHtml"
    ]
});

[Alex Gyoshev]

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.

Regards,
Alex Gyoshev
Telerik

[Andrew]

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.

[Ianko]

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. 

Regards,
Ianko
Telerik by Progress

 

 

[Sreekanth]

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?

Thanks,
Sreekanth

 

[Ianko]

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 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. 

 

Regards,
Ianko
Telerik by Progress