Cancel

Sarah Gooding

How to Build a vCard Website with a Video Background

Today we are continuing on with our new Building with Blocks series, where we demonstrate some fun things you can create with blocks.

In this tutorial I am going to show you how to build a simple vCard website with a video background in under five minutes. I wanted to build a website like this awhile back and searched for a block theme that would work but didn’t find anything that would instantly give me what I was looking for. I also searched the WordPress Pattern Directory for a vCard style pattern and could not find one. Fortunately, this type of a site is easy to build in just a few minutes with a handful of blocks.

I selected the free Eksell theme for this project, because it includes a Blank Canvas Template for pages that removes the menu, header, and footer. The only content that appears are the blocks you add to the page. Eksell is also a full-featured portfolio theme that you can grow into, if you decide to expand beyond a simple vCard website.

The five-minute video below walks you through adding the theme, starting from one of the included patterns, and adding all the necessary blocks for the social icons and the video background.

A few notes about specifics: I found the video examples used in this tutorial on Pixabay, which has a nice selection of short videos that lend themselves well to looping in the background of a website.

If you have some extra white space at the bottom after adding the video to the cover block, you can set the minimum height. Go to your cover block, click Settings, and scroll down to Dimensions where you can adjust the minimum height of the cover.

Here is the CSS for the border around the circular profile image. You can add this to the Additional CSS section of the Customizer:

.wp-block-image.is-style-rounded img {
    border-style: solid;
    border-color: #FFFFFF;
    border-width: 10px;
	
}

If you plan to keep the website simple in vCard format, you will want to assign the page you created as the Homepage. This can be done in the Customizer under the Homepage Settings panel.

As an alternative to using Eksell, if your site is on WordPress.com, you can achieve a similar result by using Automattic’s Blank Canvas theme and adding and arranging the blocks individually.

This is a fast way to customize a site after a new domain purchase. Choose any combination of blocks to create a nice placeholder until you decide to add more to the website. If you end up building this, drop a link in the comments so we can check it out.

Category: ,
9

9 responses to “How to Build a vCard Website with a Video Background”

    • It’s true they are out of fashion and have accessibility issues and yes they will slow down your site especially if it’s above the fold and not lazy loaded.

      Here’s a snippet from another blog:

      As minimalist design and speedy sites are in overwhelming demand, video backgrounds are, thankfully, becoming a thing of the past in favor of fast-loading word-only hero areas and bold text.

      Video backgrounds were a pain; not only did they demolish site speeds, they were often not compliant with WCAG 2.2.2 success criterion. They were distracting and would often change backgrounds making any text on top unreadable. We say good riddance to video backgrounds!

      Create forum topic from comment

    • I see this question a lot, especially when we post about third-party plugins, and the answer is that it depends. Yes, adding any video background in and of itself will add to the page load.

      However, page speed should be approached more holistically rather than deciding based on individual components. For example, what else is that specific page loading other than the video? Are there other areas that you could clean up if you really, really want that video background to get the design you’re after?

      Users should also consider whether they need a specific feature. Given the example of a videographer in the post above, it makes sense that someone in that role would use a video background on a profile-type card page.

      Anyway, each use case is based on individual experiences. No two websites are alike.

      Create forum topic from comment

  5. Great tutorial, Sarah – almost exactly what I was looking for in an “instant-load” v-card site.

    Just one question. Since even a basic video back will unavoidably take a bit of time to download – especially if it’s a good quality one, especially on mobile – do you think there’s an easy way to give the illusion it’s not taking that much time by using some kind of trick?

    I was thinking, for instance, to load a static image first (maybe the first frame of the video) and then have the video appear on top of that. I looked for some kind of plugin that might do that, but clean code and Gutenberg would obviously be preferable. What do you think?

    Create forum topic from comment

      • Of course. :-) I have thought of all that but have settled on one I really like that can’t be compressed anymore or it will lose all meaningful detail.

        It will be loaded via a CDN, to be sure, but since I had posted this question I looked into it and remembered that in many video blocks (even in Gutenberg’s default if I remember correctly) one can upload an image as a “cover” (like many YouTubers do with their videos for instance).

        So I extracted the first frame of the video and I intend to use it as a cover. That image will theoretically load instantly – so the visitor will not be confronted by an empty background – and the video will start playing as soon as it is loaded. If there are not enough options to tinker with this in the default Gutenberg video block I understand that there are more video blocks from other developers to try. Do you think that this might work?

        Create forum topic from comment

You may also like

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.