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


  • Robert wood 6 posts 97 karma points
    Mar 16, 2017 @ 15:34
    Robert wood
    0

    Inserting Video Banners in Umbraco

    Using Umbraco And Getting Started
    Umbraco 7

    Hello I am new to Umbraco and this forum. I am building a site using banner full width images at the top of many pages, one of these I would like to be video (mp4). I have tried all the methods I can think of with no luck. The video appears as a question mark on the page, if you click and open in a new window, the video plays outside of Umbraco.

    I don't want to embed from YouTube which is possible as I don't want any interaction between the video and YouTube, links etc.

    Does anyone know how to achieve this and provide help please?

    Copy Link
  • Michaël Vanbrabandt 863 posts 3348 karma points c-trib
    Mar 17, 2017 @ 13:14
    Michaël Vanbrabandt
    1

    Hi Robert and Welcome to the Umbraco Community forum!

    I have tried all the methods I can think of with no luck.

    Can you give some more details on how you are serving the video's on your website? Are these videos located in the Media folder?

    /Michaël

    Copy Link
  • Micha Somers 134 posts 597 karma points
    Mar 17, 2017 @ 13:24
    Micha Somers
    101

    If you have

    • a Media item uploaded (the mp4 file), and

    • a media picker defined in your DocumentType (eg. alias backgroundMovie),

    • selected a video in the Content node

    then you can use something like the following in your template:

        ​if (Model.Content.HasValue("backgroundMovie"))
    {
        ​var backgroundMovie = Umbraco.TypedMedia(Model.Content.GetPropertyValue<int>("backgroundMovie"));

        <video autoplay loop muted id="background">
            <source src="@backgroundMovie.Url" type="video/mp4">
        </video>        
    }
    Copy Link
  • Robert wood 6 posts 97 karma points
    Mar 17, 2017 @ 13:33
    Robert wood
    0

    Hi Michael

    Everything failed.

    The closest I could get was to select Page Components on the page I need the video then create a page component of type text/video. However there is no ability to link a video to a local file, just a static image, There is a field for entering a video URL which has to be either YouTube or Vimeo which would not work for me as I need it as a full width banner.

    I see no way to do it except possibly using code entered directly into the page html using something like HTML5 Video sections.

    I do have small videos from YouTube running in some page content but they are just small "thumbnails" which you can choose to open full screen directly on YouTube. Fine for informational videos but of no use as a main page decorative section.

    I am surprised that no-one has yet come up with a package to make this possible.

    Copy Link
  • Dan Diplo 1554 posts 6205 karma points MVP 5x c-trib
    Mar 17, 2017 @ 15:35
    Dan Diplo
    1

    Robert, there's really need for a package as it's quite simple to do. If you can use the media picker to select an image then you can do the same with a video - the only difference is the mark-up to render the video is different for an image.

    Micha has explained the steps.

    You need media picker to select the video from the media library. This stores the ID of the media item.

    You Umbraco.TypedMedia on this ID to get a reference to the actual media item, as published content.

    You can then access all it's properties. The main one is Url which you add to the HTML you use to render the video. In HTML5 this is pretty simple - see https://developer.mozilla.org/en/docs/Web/HTML/Element/video

    Copy Link
  • Robert wood 6 posts 97 karma points
    Mar 17, 2017 @ 16:45
    Robert wood
    0

    Michael and Dan

    I appreciate your guidance very much. I should say that I am only one week into my very first Umbraco website which I am trying to build to replace an existing Wordpress site (which I didn't build and don't at all like!).

    As you can imagine, I keep finding features within Umbraco that are not exposed unless you know where to find them!

    I am very happy with my progress on the site and I am liking Umbraco very much.

    I am a developer but I am also in the process of upping my own skills which are based on years of Classic ASP to gain more competence in .NET MVC.

    I do have to scratch my head, read manuals and google like mad in some areas, handling video properly being one of them!

    Once again I am delighted to get such positive help from this site and people like you two. I will follow your instructions and see how I go and thanks again!

    Copy Link
  • Dan Diplo 1554 posts 6205 karma points MVP 5x c-trib
    Mar 17, 2017 @ 19:29
    Dan Diplo
    0

    Hi Robert,

    Glad you like Umbraco! As you can tell, most people here do, too - and are happy to help. It's true Umbraco documentation can be a bit erratic - but the official docs are now pretty good, now - https://our.umbraco.org/documentation/ They contain a wealth of info, the main thing is trying to find it!

    But there is help on rendering media here:

    https://our.umbraco.org/documentation/Getting-Started/Backoffice/Property-Editors/Built-in-Property-Editors/Media-Picker

    You might also want to install Bookshelf - a handy guide to Umbraco that you can install - see https://our.umbraco.org/projects/backoffice-extensions/bookshelf

    Good luck!

    Copy Link
  • Robert wood 6 posts 97 karma points
    Mar 25, 2017 @ 12:41
    Robert wood
    1

    I'd just like to thank both Michael and Dan again for the great help supplied

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft