Youtube Video

[Mitra-300]

How to upload Youtube video kindly someone help on this?

[andrerav]

You can add a text block and paste your Youtube embed code there :)

[soljakwinever]

I was wondering how to do this too, I tried what @andrerav suggested but wasn't very happy as it wasn't responsive in my browser when it came to changing block sizes. I wound up writing a custom block for this that solved my issue.

    [BlockType(Name = "Youtube Embed", Category = "Video", Icon = "fab fa-youtube", Component = "youtube-embed")]
    public class YoutubeEmbedBlock : Block
    {
        public StringField YoutubeUrl { get; set; }
    }

It's rather simple with just a string field and can probably be improved upon but that's all I needed for the class. Next I created a custom manager component for it. I put this in a file called CustomBlocks.js in my wwwroot/assets folder

Vue.component("youtube-embed", {
    props: ['model'],
    methods: {
    },
    computed: {
        isEmpty: function () {
            return piranha.utils.isEmptyText(this.model.youtubeUrl.value);
        }
    },
    template:
        '<div class="block-body" :class="{ empty: isEmpty }">' +
        '   <input class="form-control" type="text" placeholder="Youtube embed link" v-model="model.youtubeUrl.value"/>' +
        '   <template v-if="!isEmpty">' +
        '       <div class="video-container">' +
        '           <iframe width="560" height="315" frameborder="0" allowfullscreen class="video" :src="model.youtubeUrl.value">' +
        '           </iframe>' +     
        '       </div>' +
        '   </template>' +
        '</div>'
              
});

Again this is fairly simple, it has an text input that you paste your embed link into and it updates the iframe with the url provided.

Now I needed to create the Razor view for the page in the Pages/DisplayTemplates folder. Make sure the name of this file matches up with the name of the Class name or the CMS won't know how to desplay the block. In our case, it is called the YoutubeEmbedBlock.cshtml

@model AaronPortfolio.Extend.YoutubeEmbedBlock
@{
    string url = Model.YoutubeUrl.Value;
}
<div class="video-container">
    <iframe width="560" height="315" frameborder="0" allowfullscreen class="video"
            src="@url">
    </iframe>
</div>

Next was CSS. You need to include this CSS twice. Once in your sites custom styling sheet (for the front end) and again in a manager specific css file (I called mine CustomBlocks.css)

.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Once that is complete I put the following in my Program.cs file (I'm using .NET 6.0 your initialization code might elsewhere) inside the app.UsePiranha method:

app.UsePiranha(options =>
{
    // Initialize Piranha
    App.Init(options.Api);
    App.Blocks.Register<YoutubeEmbedBlock>();

    App.Modules.Manager().Styles.Add("~/assets/css/CustomBlocks.css");
    App.Modules.Manager().Scripts.Add("~/assets/js/CustomBlocks.js");

//yada yada yada, rest of the method below here...

After all of this is completed you should be able to start adding the custom block to your pages in the manager

Simply paste your embed url into the text field (https://www.youtube.com/embed/{your video id here})

Publish your page and go look at it:
ezgif-5-4b76cb4667.webm

[andrerav]

Well done! I'm definitely adopting this since I use this functionality a lot on my site :) Is it possible to publish this as a nuget package somehow?

[Mitra-300]

Thanks !! It's really good for me.

…

On Mon, 20 Feb 2023 at 02:39, Andreas Ravnestad ***@***.***> wrote: Well done! I'm definitely adopting this since I use this functionality a lot on my site :) Is it possible to publish this as a nuget package somehow? — Reply to this email directly, view it on GitHub <#1972 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AVZD4Y7SKTFWBSU6DRVMEEDWYKDXZANCNFSM6AAAAAATO5RGUA> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>