How to Add Vimeo or Youtube Background Video to Orchard CMS

Hi,

Today I am going to discuss Add Vimeo or Youtube Video in Background using Orchard CMS systems.

Problem: Generally, Orchard CMS systems already provides inbuilt functionality for adding background video that is “Vimeo Field” Module. You may also find it from Orchard Gallery. So, using this method all working fine and you will succeed to get the outcomes. Let’s See the Example how you can simply add Vimeo Video using VimeoField.

Step #1: First of all, you need to install Vimeo field module from Orchard Gallery. After installing you can see the option “Vimeo Field” in field type. Please verify the below screenshot.

vimeo and youtube video background orchard cms 

Step #2: Add new field name in any of the content-type Vimeo video and change settings as per your convenience.

vimeo and youtube video background orchard cms

Step #3: After saving it you can see the field on your page.

vimeo and youtube video background orchard cms

You can see There are three Fields.

  1. VimeoId
  2. Width
  3. Hight



Step #4:  Add the Vimeo Video Id and you may enter the custom width and heights there, after that just publish it.

vimeo and youtube video background orchard cms

As you can see this is the simple and short way you can add Vimeo Video. But what if in any case you need to add it manually then.. ?

Solution

So Friends , I want to share with you one example which is useful to add Vimeo Video manually.

Step #1:  Add text field in a page or (Any) content type.

vimeo and youtube video background orchard cms

Step #2: Create a page and fill all values and publish the page. See the result.

vimeo and youtube video background orchard cms

Step #3: Now, you can add alternate view using shape tracing of this and design it.

Add code. for HTML design.

vimeo and youtube video background orchard cms


For playing video in the background you can add jquery like this.

    $(document).ready(function () {
        $('#video-fullscreen').on('click', function (ev) {
            var url = '@InputField';
            var splitUrl = url.split('/');
            for (var i = 0; i < splitUrl.length; i++) {
                if (isNaN(splitUrl[i]) == false) {

                    var id = splitUrl[i];
                }
            }
            $("#iframeVideo").attr("src", "https://player.vimeo.com/video/" + id + "?autoplay=1&color=ffffff&title=0&byline=0&portrait=0");
            $(".homevideo").addClass("activehomevideo");
            $(".banerbox").addClass("activebanerbox");
            ev.preventDefault();
        });
        $('#removeVideo').on('click', function (ev) {
            $(".homevideo").removeClass("activehomevideo");
            $(".banerbox").removeClass("activebanerbox");
            ev.preventDefault();
        });
    });

Step #4: It will result in this.

Above Results show that manually implementation of Vimeo video is better way rather than using VimeoField.

So what you think, this is better way or not?

Conclusion

When designing Website, it is necessary to build extensible Platform as a first-class feature. This can be challenging and require very open and easy architecture. This is the whole Orchard is about.  You can make things dynamic manually without using it’s by default features and try to do it manually it will increase your knowledge as well as you will become more comfortable with Orchard CMS.

For know more about Orchard please read refer below link :
http://docs.orchardproject.net/en/latest/Documentation/How-Orchard-works/

If you still getting any difficulties in Orchard CMS development then you can get the help of our experienced Orchard CMS Developers.

Thank you for Reading!

By | 2018-01-01T12:19:10+00:00 December 30th, 2017|CMS System, Orchard CMS|