This is a migrated thread and some comments may be shown as answers.

Editor - Embed Video in IE

5 Answers 356 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 20 May 2013, 07:26 PM
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"
    ]
});

5 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 22 May 2013, 07:15 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Andrew
Top achievements
Rank 2
answered on 18 Oct 2016, 02:08 PM

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.

0
Ianko
Telerik team
answered on 20 Oct 2016, 07:17 AM

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
 
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.
 
0
Sreekanth
Top achievements
Rank 1
answered on 12 Apr 2017, 02:12 PM

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

 

0
Ianko
Telerik team
answered on 13 Apr 2017, 07:14 AM

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
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.
Tags
Editor
Asked by
Joe
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Andrew
Top achievements
Rank 2
Ianko
Telerik team
Sreekanth
Top achievements
Rank 1
Share this question
or