

Video has become increasingly important for web experiences because it’s the most engaging type of content. Responsive sites are also easier to share on social media, leading to even more engagement. Search rankings are impacted because site usability affects how often and how long consumers visit a site, which are key metrics for SEO. Moreover, search engines like Google recognize that consumers prefer mobile-friendly experiences and often reward them with a higher search engine results page (SERP). That’s because responsive websites generally offer a more consistent experience across different devices. Responsive design not only improves the user experience on mobile devices but can increase customer conversions and reduce website bounce rates as well. Yet responsive video is often an afterthought for many brands. For a high-quality customer experience, the website needs to adjust its content-including videos-to fit the device’s display. Responsive web design has become critical for today’s brands because consumers now use a variety of devices to browse the Internet.

What does that mean exactly, and why does it matter? Let’s take a closer look. Responsive videos automatically resize to fill the width of the video player while still maintaining their original video aspect ratio. For more information on using HTML5 video tags, see this article on w3schools.What Is Responsive Video? Responsive videos adjust their size while maintaining their original aspect ratio on websites. There are other attributes that will allow you to control how your video is loaded and displayed. The controls attribute will expose basic playback controls for your video you can also set the video to autoplay, loop, or be muted as in this example:
RESPONSIVE RESIZE VIMEO EMBED CODE
Then, copy the video's URL and use it wherever it is needed, including the Video Backdrop.Īfter uploading a video file, open the page's code view and create a video tag to embed your video file: If you have a video file that you'd like to embed directly into a Page, start by uploading it into your Personal File Hosting area, inside the content editor: Images →. This article at Dive Into HTML5 has a good introduction to creating web-compatible video using Handbrake. Start by making sure that the video you are using is browser-compatible: Use H264 video and AAC audio. To place a Youtube or Vimeo embed inside a Video Backdrop, paste the URL of the video's page - not its embed code - into the Enter Video URL field. Find the Embed option and copy the provided code this code can be pasted directly into your Page through the Cargo content editor. On the source page of your video, click the Share button. There are several possible ways to add video to your site, depending on whether you are hosting your video inside your Cargo site or on a third-party site like Vimeo or Youtube.īoth Youtube and Vimeo offer simple embed codes that can be pasted directly into any Page.
