How do I add a Youtube Video on Home Page?

Total Posts: 59
Karma: 325
Joined: 12/22/2011
Location: India

Posted: 6 years ago

Greetings everyone,

Is there a way to add a youtube video on home page of nopCommerce just above the footer.

One method I tried is by adding the embed code in Homepagetext Topic; But the video shows up above the featured categories;

Is it possible to show up video below the featured categories section instead?

Thanks in advance;

forefront

Total Posts: 1081
Karma: 10036
Joined: 7/11/2016
Location: India

Posted: 6 years ago

You can use widget funtionality

Pratik Shah

Total Posts: 59
Karma: 325
Joined: 12/22/2011
Location: India

Posted: 6 years ago

Hello,

Can you please guide how to go about it?

Thanks.

embryo

Total Posts: 1390
Karma: 11685
Joined: 8/10/2012
Location: United States

Posted: 6 years ago

Pratik Shah wrote:

Greetings everyone,

Is there a way to add a youtube video on home page of nopCommerce just above the footer.

One method I tried is by adding the embed code in Homepagetext Topic; But the video shows up above the featured categories;

Is it possible to show up video below the featured categories section instead?

Thanks in advance;

Did you try applying some CSS styling to the iframe or video container after embedding it?

You might be able to do something like this to position the video better:
<div class="video-container">
<iframe src="https://www.youtube.com/embed/3f4d8s3es?rel=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

Then, in your stylesheet, add this:

.video-container {
   position:relative;
   top: -150px;
   left: 50px;
}

Adjust the top and left values until the video is where you want it.

rbigej

Total Posts: 10
Karma: 106
Joined: 8/28/2016
Location: United States

Posted: 6 years ago

We use the "Nop HTML Widget" Plugin for this type of thing: https://www.nop-templates.com/html-widgets-plugin-for-nopcommerce

[email protected]

Total Posts: 47
Karma: 349
Joined: 8/26/2016
Location: India

Posted: 5 years ago

embryo wrote:

Greetings everyone,

Is there a way to add a youtube video on home page of nopCommerce just above the footer.

One method I tried is by adding the embed code in Homepagetext Topic; But the video shows up above the featured categories;

Is it possible to show up video below the featured categories section instead?

Thanks in advance;

Did you try applying some CSS styling to the iframe or video container after embedding it?

You might be able to do something like this to position the video better:
<div class="video-container">
<iframe src="https://www.youtube.com/embed/3f4d8s3es?rel=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

Then, in your stylesheet, add this:

.video-container {
   position:relative;
   top: -150px;
   left: 50px;
}

Adjust the top and left values until the video is where you want it.

by using ur iframe style i added my vidio by this
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/watch?v=sbJWJsUv6aQ&feature=youtu.be" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
but its not showing on topic page why???

ilyaspatel

Total Posts: 53
Karma: 511
Joined: 11/20/2017
Location: India

Posted: 5 years ago

Hi,

Create a widget funtionality, by adding in your plugin

you just need to add a view page in your plugin and in that you can keep a video as you want

and add code in cs file to to display.

Thanks

A2Hosting_Liaison

Total Posts: 189
Karma: 1097
Joined: 5/7/2018
Location: United States

Posted: 5 years ago

Pratik Shah wrote:

Greetings everyone,

Is there a way to add a youtube video on home page of nopCommerce just above the footer.

One method I tried is by adding the embed code in Homepagetext Topic; But the video shows up above the featured categories;

Is it possible to show up video below the featured categories section instead?

Thanks in advance;

You can add add your video here: \Nop.Web\Views\Home

Open "Index.cshtml" view

@{
    Layout = "_ColumnsOne";

    //page class
    Html.AppendPageCssClassParts("html-home-page");
}
<div class="page home-page">
    <div class="page-body">
        @await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.HomePageTop })
        @await Component.InvokeAsync("TopicBlock", new { systemName = "HomePageText" })
        @await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.HomePageBeforeCategories })
        @await Component.InvokeAsync("HomepageCategories")
        @await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.HomePageBeforeProducts })
        @await Component.InvokeAsync("HomepageProducts")
        @await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.HomePageBeforeBestSellers })
        @await Component.InvokeAsync("HomepageBestSellers")
        @await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.HomePageBeforeNews })
        @await Component.InvokeAsync("HomepageNews")
        @await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.HomePageBeforePoll })
        @await Component.InvokeAsync("HomepagePolls")
        @await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.HomePageBottom })


<!-- ADD YOUR VIDEO SCRIPT / CODE HERE -->


    </div>
</div>

How do I add a Youtube Video on Home Page?

Still have questions or need help?