Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • James 251 posts 1169 karma points
    Jul 21, 2014 @ 15:44
    James
    0

    Youtube Embed

    Using Umbraco 7

    Hi All,

     

    I currently have a field that asks the user to copy and paste the youtube url of a video they want displayed on their website.

    I have looked at ways of doing this that make it easy for the user to do it.

    My issue is that when they copy the URL from the browser it has http://youtube.com/watch etc.

    when in actual fact all they eed is //www.youtube.com/embed=idofvideo

     

     

    I notice that the rich text editor for umbraco can chop up the url and make it into an embeded video quite easily.

     

    Does anyone have a guide on how to do this or know how i can do it easily?

     

    Kind regards.

     

    Copy Link
  • Dan 1285 posts 3917 karma points c-trib
    Jul 21, 2014 @ 16:33
    Dan
    1

    Hi James,

    The YouTube URLs contain the id of the video as a querystring parameter, so you could use one of several methods in your Razor/C# script to grab the id and just use it to populate an iframe(/alternative) embed code or whatever mark-up you need to render the video.

    The other approach, which is a bit more 'belt and braces' would be to use something like OEmbed to handle this - I believe that's what the Umbraco WYSIWYG editor is doing (see more about where that came from here: https://groups.google.com/forum/#!msg/umbraco-dev/TOssxGdAnRY/EpMnX-atuWIJ).

    Copy Link
  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Jul 21, 2014 @ 17:10
    Dennis Aaen
    1

    Hi James,

    You could do it on serval ways.

    The first way is by using the embed option on the rich text editor, where you get the user to copy the url in, like this screenshot,

    If you don´t have the embed option on your Rich text editor, then go to the developer sections, open the data type folder, and find the rich text editor, here you can set ticks for which options the user should be able to do in the rich text editor.

    Another option is to create a field where the user can type in the url for the video or just the id of the video, and the make a razor file where you print out the video.

    It could look something like this e.g

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
    @{      
        if (CurrentPage.HasValue("youtube")){   
            
            <iframe id="ytplayer" type="text/html" width="640" height="390" src="@CurrentPage.youtube" frameborder="0"/>
         
        }
    }

    Or you could do so the user only needs to add the id of the video like this:

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
    @{      
        if (CurrentPage.HasValue("youtube")){   
            
            <iframe id="ytplayer" type="text/html" width="640" height="390" src="http://www.youtube.com/[email protected]" frameborder="0"/>
         
        }
    }

    Hope this helps,

    /Dennis

    Copy Link
  • James 251 posts 1169 karma points
    Jul 21, 2014 @ 17:41
    James
    0

    As daft as it sounds I think asking my user to select only the ID from the YouTube URL would be too much. And would confuse sections of the URL.

     

    I am going to have to look at an option that takes the YouTube ID from the URL and serves it up in the iframe using razor.

     

    Anythign specific on that?

     

    Kind regards,

     

    Thanks for the posts so far, i will review them.

     

    TY

    Copy Link
  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Jul 21, 2014 @ 21:09
    Dennis Aaen
    100

    Hi James,

    Don't know if this is the best way to do it, but it's possible way to insure that the iframe is working, in both situations if the user choose to use the hole URL for the YouTube video, or just the ID of the YouTube video.

    The video ID of a YouTube video is currently 11 characters in length.

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
    @{      
        if (CurrentPage.HasValue("youtube")){  

            if(CurrentPage.youtube.Length == 11){ 
                <iframe id="ytplayer" type="text/html" width="640" height="390" src="http://www.youtube.com/[email protected]" frameborder="0"/>
                
            } else{ 
                 <iframe id="ytplayer" type="text/html" width="640" height="390" src="@CurrentPage.youtube" frameborder="0"/>
            }
            
        }
    }

    And to make it more easier for your user to know what to type in the field you could use the description field on the document type, you could rewite something like paste in the full URL for the youtube video, or copy the id of the Youtube video (Use YouTube id e.g.: tF03jgCgV7s)

    I hope this could be a solution for you.

    /Dennis

    Copy Link
  • James 251 posts 1169 karma points
    Jul 21, 2014 @ 22:27
    James
    0

    Thanks for your help Dennis i used your solution for the time being :)

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft