Editor - Embed Video in IE

4 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">
        <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"
        ]
    });
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 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.

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

    Posted 18 Oct 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.

  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 20 Oct 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

    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.
     
Back to Top
Kendo UI is VS 2017 Ready