cultivate logo

Three Ways to Incorporate Video into Your Website


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:

METHOD 1:

→ 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.

How It Works:

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!

METHOD 2:

→ 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!

How It Works:

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.

METHOD 3:

→ 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.

How It Works:

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.

Recent Articles

Back to Blog
Web Design & Development

How to Keep Bots from Spamming Your Contact Forms
With the rise of artificial intelligence, spam bots are getting even more difficult to fend off. You may have already...
Discover More
Blog SEO Web Design & Development

A Comprehensive Guide to Domain Changes
Any seasoned SEO professional will tell you that changing your domain name will have purely negative SEO consequences. Even if...
Discover More
SEO Web Design & Development

What is Lazy Loading?
Lazy loading is a growing trend in web design. It’s gained popularity since Google started showing a stronger emphasis on...
Discover More

Dominating Competition with SEO-Infused Websites

A beautiful website is only as effective as its visibility. That’s why our approach to web design and development, intertwined with proprietary SEO best practices, creates the foundation for dominating your market. We seamlessly integrate search engine optimization into your website’s architecture, ensuring it ranks well on Google and other popular search engines. Our team employs proven on-site and off-site SEO strategies—optimizing the site’s architecture, key elements, page speed, and mobile responsiveness are just some of the basics you can expect when working with Range. The result? A website that not only captivates your audience but also attracts organic traffic.

More About SEOView all services

Stunning Website Design & Development

As a business owner in today’s digital culture, you absolutely need a website to reach customers. Your website should not only look nice, but also help you achieve your unique goals every single day. At Range Marketing, we’ll custom build your beautiful, mobile-friendly website with a focus on conversions, without losing sight of your brand ideals and goals.

More about webView all services

Headless E-Commerce

Harness the power of native/headless e-commerce to take your dispensary’s online presence to the next level. Unlike traditional platforms, headless e-commerce gives you the freedom to custom-brand your menu, seamlessly integrate shopping CTAs throughout your entire site, and unlock more robust SEO benefits. This flexibility allows you to craft unique, seamless shopping experiences across all devices and touchpoints. Plus, with our AI-driven Cannaboost product, you can supercharge your site’s SEO performance while keeping it fast, responsive, and visually stunning. If you’re aiming to scale your business or outpace the competition, headless e-commerce delivers the agility and innovation you need to thrive in the modern cannabis market.

More about HeadlessView all services

We Turn Browsers into Buyers with Optimized E-Commerce

Leverage the power of artificial intelligence with Range’s Cannaboost AI – the industry’s first ever proprietary software that optimizes your cannabis product descriptions. 20,000 SKUs? No problem. This unique approach to optimizing your storefront enables searchers to easily find the brands and products you carry, which statistically separates your storefront from competitors in a major way. 700% increases in product revenue is not a foreign data point when implementing product search optimization.

Calculate Your Cost

Captivating Content That Ranks

In the SEO world, content is still king, and we know just how crucial it is in today’s digital landscape. Beyond stunning design, our website development services include top-tier content creation and integration. We craft SEO-optimized content that doesn’t just look good but speaks directly to your target audience, driving engagement and results.

View all services

Data-Driven Insights for Informed Decisions

Data-driven decision-making is at the core of our web design and development strategy. We provide real-time dashboard analytics to give you actionable insights into your website’s performance. Our customizable dashboards offer a comprehensive view of key metrics, such as traffic, user behavior, and conversion rates. This empowers you to make informed adjustments and optimizations, ensuring that your website continues to evolve and meet your business objectives effectively.

View all services

We Can’t Wait to Meet You.

We will take a close look at your business and your current website. One of our experts will contact you with informed analysis and a plan to grow your business. Request a free analysis:

(716) 240-9140

  • This field is for validation purposes and should be left unchanged.
Company Logo 1
Company Logo 2
Company Logo 3
Company Logo 4

Our results speak for themselves! Book Now!Free website evaluation

We drive traffic & leads to small businesses.

Enter your company's information below: