The Advantages of Autoplay Videos<\/h3>\n\n\n\n
Autoplay videos offer several advantages over GIFs:<\/p>\n\n\n\n
- \n
- Efficient compression<\/strong>. Modern video formats like MP4 use advanced compression techniques, resulting in smaller file sizes without sacrificing quality. This makes autoplay videos less resource-intensive.<\/li>\n\n\n\n
- Higher quality<\/strong>. Videos can display millions of colors, providing a richer and more vibrant viewing experience compared to GIFs.<\/li>\n\n\n\n
- Audio support<\/strong>. Videos can include audio, offering more flexibility in content creation.<\/li>\n\n\n\n
- Control over playback<\/strong>. Videos offer better control over playback options, such as looping, pausing, and muting, which can enhance user experience.<\/li>\n<\/ul>\n\n\n\n
Prerequisites<\/h2>\n\n\n\n
Before we dive into the step-by-step guide, make sure you have the following:<\/p>\n\n\n\n
- \n
- A WordPress site.<\/li>\n\n\n\n
- A Cloudinary account.<\/li>\n\n\n\n
- The Cloudinary WordPress Plugin.<\/li>\n<\/ol>\n\n\n\n
Now, let\u2019s take a step-by-step walkthrough on how to create this.<\/p>\n\n\n\n
Step-by-Step Guide<\/h2>\n\n\n\n
The first thing we need to do is sign up for a free Cloudinary account<\/a>.<\/p>\n\n\n\n
Once signed in, familiarize yourself with the Cloudinary dashboard. Note your Cloudinary URL, which is essential for uploading and retrieving media located in your API keys page:<\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_502,c_scale\/f_auto,q_auto\/v1724281022\/Web_Assets\/blog\/blog-Using-Autoplay-With-Cloudinary-and-WordPress-1\/blog-Using-Autoplay-With-Cloudinary-and-WordPress-1.png?_i=AA\")
<\/figure>\n\n\n\nThe next thing we need to do is install the Cloudinary plugin in your WP Admin after you create a WordPress install.<\/p>\n\n\n\n
- \n
- Plugin installation<\/strong>:\n
- \n
- In your WordPress admin dashboard, navigate to Plugins > Add New.<\/li>\n\n\n\n
- Search for \u201cCloudinary\u201d and install the plugin.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Activate and configure<\/strong>:\n
- \n
- Activate the plugin.<\/li>\n\n\n\n
- Go to the Cloudinary settings page in your WordPress dashboard and enter your Cloudinary API credentials (found in your Cloudinary dashboard).<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
You should see a dashboard that looks like this in your WP Admin:<\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_558,c_scale\/f_auto,q_auto\/v1724281014\/Web_Assets\/blog\/blog-Using-Autoplay-With-Cloudinary-and-WordPress-2\/blog-Using-Autoplay-With-Cloudinary-and-WordPress-2.png?_i=AA\")
<\/figure>\n\n\n\nUploading Videos to Cloudinary<\/h3>\n\n\n\n
Now that we have our WordPress install setup with the Cloudinary plugin, we need to upload our videos into Cloudinary.<\/p>\n\n\n\n
Upload Video<\/strong><\/h4>\n\n\n\n
- \n
- Access Media Library<\/strong>. Go to your Cloudinary Media Library.<\/li>\n\n\n\n
- Upload video<\/strong>. Click the Upload<\/strong> button and select your video file. Ensure the video is optimized for web use, typically in MP4 format. You should see this:<\/li>\n<\/ol>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_563,c_scale\/f_auto,q_auto\/v1724281007\/Web_Assets\/blog\/blog-Using-Autoplay-With-Cloudinary-and-WordPress-3\/blog-Using-Autoplay-With-Cloudinary-and-WordPress-3.png?_i=AA\")
<\/figure>\n\n\n\nOptimize Video<\/strong><\/h4>\n\n\n\n
Cloudinary provides several optimization options to ensure your video is web-friendly:<\/p>\n\n\n\n
- \n
- Quality and format<\/strong>:\n
- \n
- Use the following URL parameters to optimize your video:\n
- \n
q_auto<\/code>. Automatically adjusts quality to balance file size and visual quality.<\/li>\n\n\n\nf_auto<\/code>. Automatically selects the best format for the user\u2019s browser.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\nPlace those URL parameters into your Cloudinary URL and it should look like this example:<\/p>\n\n\n
https:\/\/res.cloudinary.com\/YOUR_CLOUD_NAME\/video\/upload\/q_auto,f_auto\/YOUR_VIDEO.mp4<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nCloudinary also offers advanced options like bitrate control, codec selection, and resolution adjustments. These can further enhance performance and quality based on your specific needs. For this article, we will just be using the two parameters above.<\/p>\n\n\n\n
Embedding Autoplay Videos in WordPress<\/strong><\/h4>\n\n\n\n
After uploading and optimizing your video, copy the video URL from your Cloudinary Media Library. <\/p>\n\n\n\n
Next, go back to your WP Admin dashboard and navigate to a Post or a Page. Whichever type you want to add the video to. In my example, I\u2019ll embed it into a post.<\/p>\n\n\n\n
Once you\u2019re at the edit page of your post or page, click the block editor <\/em>+ <\/em><\/strong>sign and search and select Custom HTML Block<\/strong>.<\/p>\n\n\n\n
Then embed your HTML in the block:<\/p>\n\n\n
<video<\/span> autoplay<\/span> loop<\/span> muted<\/span> playsinline<\/span>><\/span>\n <source<\/span> src<\/span>=\"https:\/\/res.cloudinary.com\/YOUR_CLOUD_NAME\/video\/upload\/q_auto,f_auto\/YOUR_VIDEO.mp4\"<\/span> type<\/span>=\"video\/mp4\"<\/span>><\/span>\n Your browser does not support the video tag.\n<\/video<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nIf you\u2019ve followed the steps correctly, you should see this in your WP Admin:<\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_595,c_scale\/f_auto,q_auto\/v1724281000\/Web_Assets\/blog\/blog-Using-Autoplay-With-Cloudinary-and-WordPress-4\/blog-Using-Autoplay-With-Cloudinary-and-WordPress-4.png?_i=AA\")
<\/figure>\n\n\n\nHere is a an explanation of the attributes we passed into the HTML:<\/p>\n\n\n\n
- \n
autoplay<\/code>. The video will start playing as soon as it is ready.<\/li>\n\n\n\nloop<\/code>. The video will replay automatically after finishing.<\/li>\n\n\n\nmuted<\/code>. The video will play without sound.<\/li>\n\n\n\nplaysinline<\/code>. Ensures the video plays inline on mobile devices without entering fullscreen mode.<\/li>\n<\/ul>\n\n\n\nAdditional Customizations<\/strong><\/h4>\n\n\n\n
There are a few additional customizations you can do to your image page. The two most common are setting poster images and fallback content.<\/p>\n\n\n\n
Poster Image<\/strong><\/h5>\n\n\n\n
A poster image is a static image to display before the video starts playing. This can be helpful if you want an image to act as a preview of the video content, enticing users to watch the video. This is particularly useful for marketing videos, tutorials, or any content where the initial visual can attract attention. This can be done by adding the
poster<\/code> attribute to the<video><\/code> tag:<\/p>\n\n\n<video<\/span> autoplay<\/span> loop<\/span> muted<\/span> playsinline<\/span> poster<\/span>=\"https:\/\/res.cloudinary.com\/YOUR_CLOUD_NAME\/image\/upload\/YOUR_POSTER_IMAGE.jpg\"<\/span>><\/span>\n <source<\/span> src<\/span>=\"https:\/\/res.cloudinary.com\/YOUR_CLOUD_NAME\/video\/upload\/q_auto,f_auto\/YOUR_VIDEO.mp4\"<\/span> type<\/span>=\"video\/mp4\"<\/span>><\/span>\n Your browser does not support the video tag.\n<\/video<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nFallback Content<\/strong><\/h5>\n\n\n\n
Fallback content is additional content provided within the
<video><\/code> tag that will be displayed if the video cannot be played for any reason. This content typically includes a message, alternative links, or other media that can be rendered when the video tag fails to work. This ensures that users still have access to some form of content even if their browser or device can’t play the video. <\/p>\n\n\n\nThis is also useful for ensuring that content is accessible to all users, including those with disabilities or those using assistive technologies. Fallback content can include descriptive text or links to download the video, making the content more accessible.<\/p>\n\n\n\n
This example is one that provides fallback content for browsers that don’t support the video tag. You can customize your fallback content to fit your site’s needs:<\/p>\n\n\n
<video<\/span> autoplay<\/span> loop<\/span> muted<\/span> playsinline<\/span>><\/span>\n <source<\/span> src<\/span>=\"https:\/\/res.cloudinary.com\/YOUR_CLOUD_NAME\/video\/upload\/q_auto,f_auto\/YOUR_VIDEO.mp4\"<\/span> type<\/span>=\"video\/mp4\"<\/span>><\/span>\n <p<\/span>><\/span>Your browser does not support the video tag. <a<\/span> href<\/span>=\"https:\/\/res.cloudinary.com\/YOUR_CLOUD_NAME\/video\/upload\/q_auto,f_auto\/YOUR_VIDEO.mp4\"<\/span>><\/span>Download the video<\/a<\/span>><\/span> instead.<\/p<\/span>><\/span>\n<\/video<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nStyling\/CSS<\/h4>\n\n\n\n
Now, let’s use CSS to style our video so it fits better on the page. In order to do this in your WP admin dashboard, navigate to Appearance<\/strong> > Customize<\/strong>. Then open the Additional CSS <\/strong>section. You should see this page:<\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_573,c_scale\/f_auto,q_auto\/v1724280992\/Web_Assets\/blog\/blog-Using-Autoplay-With-Cloudinary-and-WordPress-5\/blog-Using-Autoplay-With-Cloudinary-and-WordPress-5.png?_i=AA\")
<\/figure>\n\n\n\nWhen you click Additional CSS<\/strong>, it gives you a field to paste the CSS code in:<\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_572,c_scale\/f_auto,q_auto\/v1724280986\/Web_Assets\/blog\/blog-Using-Autoplay-With-Cloudinary-and-WordPress-6\/blog-Using-Autoplay-With-Cloudinary-and-WordPress-6.png?_i=AA\")
<\/figure>\n\n\n\nCopy and paste this CSS in the field:<\/p>\n\n\n
video<\/span> {\n max-width<\/span>: 100%<\/span>;\n height<\/span>: auto;\n border-radius<\/span>: 10px<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nDone! You should have a WordPress page that has an image that auto plays like a GIF<\/a> like this:<\/p>\n\n\n\n
- Use the following URL parameters to optimize your video:\n
- Upload video<\/strong>. Click the Upload<\/strong> button and select your video file. Ensure the video is optimized for web use, typically in MP4 format. You should see this:<\/li>\n<\/ol>\n\n\n\n
- Access Media Library<\/strong>. Go to your Cloudinary Media Library.<\/li>\n\n\n\n
- Plugin installation<\/strong>:\n
- Higher quality<\/strong>. Videos can display millions of colors, providing a richer and more vibrant viewing experience compared to GIFs.<\/li>\n\n\n\n