Over the last few years, video has gained a lot more popularity in website design. The combination of faster internet speeds worldwide and video production becoming less expensive has made video much more feasible for web designers to include in their designs.

Video can be added to your website in a couple of different ways:

→ Video Backgrounds

Full motion backgrounds are a favorite of the Range Marketing web development team. We frequently place b-roll style videos behind text to give our sites more dimension. Since the release of HTML5, inserting videos into website content has become much easier. Our designers use a tag called <video> to include MP4 files and sometimes even OGG, MOV, and WEBM files. Those video files can be placed anywhere on the page that our designer sees fit. Occasionally, we even include multiple video backgrounds on a single page.

Our HTML code for a video background usually looks something like this:

<video autoplay muted loop class="position-absolute full-width full-height">
<source src="/uploads/background.mp4" type="video/mp4">
</video>

We use CSS styles to place that video behind text, control the sizing, and even adjust the coloring or brightness to make sure it doesn’t obscure the overlaid text. Keeping content easy to read is not only a best practice for user experience, but legally required by ADA standards.

→ Tip from our design team:
The most widely adopted format for online video is MPEG-4. When utilizing video backgrounds you can include as many formats as you’d like, but ensure all of your videos at minimum include an .MP4 version. With MP4 format, your video will display properly on 98.2% of current browsers. It is also a good idea to include a JPG background behind the video for any users on older devices that can’t render MP4. If their device is too old to read MP4, it probably would struggle with any type of video!

→ Embedded Videos

If your company uses a video hosting platform like YouTube or Vimeo, it’s actually quite easy to embed those videos directly into your website. Our SEO Team strongly recommends embedding video content rather than simply linking out to your YouTube channel for a few different reasons:

Placing playable videos within your webpage content keeps the users on your site for longer durations, which is helpful in demonstrating to Google that your site is valuable and informational.
Keeping users on your website can also be helpful for conversions. If your video content is persuasive, the user will see clickable phone numbers and contact forms nearby!

All of the major video services have a “share” or “embed” button that will give you a chunk of code that looks like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

If you paste that into any page on your site, it’ll automatically display their video player with your video queued. Sites like YouTube will even let you customize that code to choose a starting time.

→ Tip from our design team:
If you embed videos from YouTube or Vimeo into your webpages, our developers recommend always changing the “width” attribute to “100%” rather than a fixed size to avoid issues on mobile phones. A video that is too wide will make your entire page stretch horizontally outside the screen. By changing a specific width like “560” to “100%,” the embedded video will expand and shrink to fit.

→ Playable Hosted Videos

If you prefer not to use a third party like YouTube, you can also place video files on your own server and display them using the same method we typically use for background videos. Modern browsers have a feature called “controls” that web designers can enable on hosted video files. Your video will automatically show options like play, fast forward, full screen, and volume. Hosted videos are a little more complicated than embedding a YouTube player, but they are a good option in certain scenarios where the video either breaks YouTube’s policies or is proprietary in nature.

Our HTML code for a playable video would look something like this:

<video controls>
<source src="/uploads/aboutUs.mp4" type="video/mp4">
</video>

Once that code is read by a browser like Chrome or Safari, they will populate the buttons on top of it. It is up to the web designer to dictate where on the page that video is placed and how large it will appear.

→ Tip from our design team:
When serving video content, we always recommend “lazy loading” those files after the rest of the page in order to quicken up your load time. You can use custom JavaScript or a WordPress caching plugin to allow all of the most important page elements like navigation, text, and fonts to load before your server is asked to deliver the bulky video files. For users on cellular connections, a large video file could take as long as half a minute to load.