Video recordings on the online store

Enhance user experience and increase sales with video recordings on the online store

In today's digital world, where marketing is shifting towards more interactive and visual approaches, video recordings have become an indispensable part of every successful online store. In this post, we will explore why you should include video recordings on your online store, consider the best practices for hosting these videos, and offer practical guidelines for their integration.

Why add video recordings to the online store?

Including video recordings on your online store brings numerous advantages that can significantly improve your business performance:

• Better user experience: Video recordings provide potential customers with a better insight into products or services, which can increase trust and reduce the return rate of products.
• Increased conversion: Research shows that customers are more likely to purchase products for which they have seen video recordings. Videos can showcase product features and usage in more detail, aiding the purchase decision.
• SEO benefits: Video content can improve your search engine rankings, especially if properly optimized with keywords and correct meta descriptions.

Where to host video recordings

When deciding where to host video recordings for your online store, it's important to consider the advantages of each option:

• Local Server: Directly hosting video recordings on your server allows for greater control over content and loading speed. This can be a good option if you want to keep content within your domain and improve page loading speed. The downside is that playback may be less optimized for different devices and large video files can consume significant server resources.
• YouTube/Vimeo Platforms: Using platforms like YouTube or Vimeo allows for wider reach and greater exposure of your video content. These services also automatically optimize videos for different devices and offer analytics to help you understand how your video content is performing.

How to embed a video on a website?

Now that you've decided where to host your video recordings, it's time to embed them on your website. Here is an example of a simple process for embedding a video:

1. Obtain Embed Code: On the hosting platform (e.g., YouTube), find your video and select the embed option. Copy the generated iframe code.
2. Insert Code into HTML Page: In the website editor or CMS (e.g., Magento), open the page where you want to insert the video. Switch to HTML code editing mode and paste the iframe code in the desired location.
3. Adjust settings: If necessary, adjust the size and other settings of the embedded video according to the platform's recommendations.

Example of embedding videos on the Magento 1.9 / OpenMage platform

Example of embedding videos on the Magento 2 platform

Advanced example: Using the YouTube API for dynamic content

For advanced users who want to integrate video content in a more customized way, using the YouTube API is an excellent option. This allows for dynamic loading of video recordings based on certain conditions or user actions.

How to embed a responsive YouTube video on a website?

To embed a responsive YouTube video that adapts to content, you can follow these steps:

1. Obtain embed code: Go to YouTube and find the desired video. Click on the embed option below the video and copy the iframe code. If you will have the video displayed on the same location on the product page, it is best to create a new product attribute where you copy the YouTube link. If we have our attribute, we can then make any display and additional adjustments on the store.
2. Add width and height ratio: In the HTML editor, add width and height ratio in the iframe code. Instead of static dimensions, you can use percentages, for example, width="100%", so the video adapts to the container's width.
3. or Use CSS for additional flexibility: For additional flexibility, you can use CSS to set the maximum width of the video or add other design adjustments to maintain the look of your website consistent.

/* Wrapper for video */
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* Width and height ratio (16:9) */
height: 0;
overflow: hidden;
max-width: 100%; /* You can adjust the maximum width according to your needs */
margin-bottom: 20px; /* You can also add extra space below the video */
}
/* Embedded iframe for video */
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

How does this CSS work?

1. .video-wrapper: This class defines the wrapper for your embedded video. padding-bottom: 56.25%; sets the width and height ratio (16:9 ratio), which is optimal for YouTube videos. height: 0; and overflow: hidden; hide the actual height of the wrapper and prevent content from overflowing. max-width: 100%; ensures the wrapper adapts to the width of its parent (for example, if the page container is wider, the wrapper stretches to the maximum width you set).
2. .video-wrapper iframe: This part of the CSS defines how the embedded iframe video adapts to the wrapper. position: absolute; top: 0; left: 0; width: 100%; height: 100%; places it in the top-left corner of the wrapper and stretches it to the full width and height of the wrapper, ensuring the video correctly adapts to the width and height ratio.

How to use this code?

1. Add a div with the class .video-wrapper around your obtained iframe code.
2. Adjust padding-bottom in .video-wrapper as needed if you want a different width and height ratio (for example, 4:3 would be padding-bottom: 75%;).
3. Include the CSS rules in your existing theme's CSS file (requires FTP access).

This approach will ensure that the embedded YouTube video displays correctly and adapts according to the device or browser width, enhancing the user experience of your online store.