vimeo | The Blog Pros

December 7, 2023

How to Optimize Videos for Your WordPress Website (Expert Tips)

Do you want to optimize videos for your WordPress website?

Videos are a fantastic way to engage your audience, but video files can take up a lot of space. They can slow down your website’s performance and negatively impact the user experience. That’s why optimizing videos is so important.

In this guide, we will show you how to optimize videos for websites.

How to Optimize Videos for Your WordPress Website

Why Optimize Videos for Websites?

The main reason you should optimize videos for your website is because they can be incredibly heavy to load.

Video files contain high-quality visuals and audio that make them large in file size. In fact, a single 1080p video that lasts 30 seconds can add about 30-50 MB to a website.

For context, at WPBeginner, we always aim to compress our images to less than 30 KB, which is way less than the average size of a 30-second video. If a file size is bigger than that, then it can negatively affect the page loading time.

A slow-loading website can create a chain reaction. First, it can frustrate users who want to access your website, which can then cause them to leave for a competitor.

If you run an eCommerce store, then slow performance can also lead to a higher bounce rate and lower conversions.

But don’t worry. If you have video content on your website, then all you need to do is follow our tips to optimize it and prevent that domino effect from ever happening.

Besides optimizing videos for your website performance, it’s also good to optimize videos for SEO. With the rise of video content platforms like YouTube and TikTok, videos have become a powerful tool to bring in traffic to your website.

When optimized properly, video search results can be more noticeable, boost your online visibility, and improve your search engine rankings.

That being said, let’s take a look at how to optimize videos for websites. You can use the quick links below to skip to different tips in our post:

Use a Video Hosting Service
Compress Your Video Before Uploading It
Set Up Your Video Sitemap and Schema Markup
Enable Lazy Loading
Use a Video CDN
Bonus Tips to Optimize Background Videos in WordPress

1. Use a Video Hosting Service

First, you should choose a reliable video hosting platform. Our years of experience with WordPress have shown that it’s better to use a third-party video hosting provider than to self-host your own videos.

You can read our article on why you should never upload a video to WordPress for more details. But essentially, uploading videos to your media library can take up a lot of your web hosting bandwidth and resources.

Even if you use a powerful cloud or dedicated web host, it’s much easier to use embedded videos than to self-host your video content. If you host your own videos, then you will need to process them to be compatible with different devices.

Meanwhile, platforms like YouTube and Vimeo take care of this for you. There’s no need to worry about using a certain file format or resolution so long as they are supported by the platform.

Then, you can simply embed the video in your WordPress website using a Video block and the URL of your content.

You can check out our guide on the best video hosting sites if you need recommendations.

If you are displaying product videos for your WooCommerce website, then you can also read our step-by-step guide on adding WooCommerce product videos to galleries.

2. Compress Your Video Before Uploading It

Images need to be compressed before you upload them to WordPress, and so do videos. Compression is a quick and easy way to reduce file sizes so they don’t slow down your page speed.

That being said, not all video optimization tools are equal. While they may make the file size smaller, they can also compromise your video quality.

When looking for software to compress your videos, make sure that it supports the file format you are planning to use.

If you are uploading videos to YouTube or Vimeo, then most likely, you are using a popular format like MP4, WebM, or MOV. These formats are widely supported by video compression platforms.

Additionally, consider using a tool that offers adjustable compression levels. Typically, you will be able to choose between low, medium, or high video quality. You may also select a desired resolution to make the size smaller.

Finally, don’t forget to consider the platform’s pricing. There are many free software options to optimize videos for websites online, but you must test them out to see if they add a watermark.

One popular online video optimization tool is VEED.IO.

This free platform comes with basic and advanced compression settings and doesn’t add a watermark to your content. All you need to do is upload your video to the tool and select a video quality and resolution.

If you want to use a desktop tool, then you can check out HandBrake.

It’s a free and open-source video compression platform that’s compatible with all major operating systems.

3. Set Up Your Video Sitemap and Schema Markup

Reducing the video file size and quality is just one part of video optimization. If you want your videos to appear on search engine results pages (SERPs), then you need to help Google understand and index your content effectively.

One way to do this is to use the All in One SEO for WordPress (AIOSEO) plugin. It’s the best WordPress SEO plugin that can help you easily optimize your content and monitor your website’s performance.

To access AIOSEO’s Video SEO features, like the Video Sitemap and Video Schema Markup, you will need to sign up for a Pro plan.

Then, you can install and activate the AIOSEO plugin in WordPress. For more guidance, check out our guide on how to install a WordPress plugin.

After installing the plugin, you can activate the license key. Simply go to All in One SEO » General Settings from your WordPress admin area and insert the license key there.

From here, you can follow our step-by-step guide on how to set up a video sitemap in WordPress.

A video sitemap is a specialized XML sitemap that provides detailed information about the videos on your website. This data includes the video title, description, duration, thumbnail URL, and the page where the video is embedded.

By creating a video sitemap, you enable search engines to crawl and index your videos more effectively.

Another important step is setting up video schema markup. This is structured data that helps search engines understand what your videos are about.

It increases the likelihood of your videos showing up as special previews (or rich snippets) in search results, making them more noticeable to people searching online. Here’s how that looks:

Example of an optimized video search result

To configure video schema markup on AIOSEO, just go to the WordPress post or page where your video is embedded and open the WordPress block editor.

After that, scroll down to the AIOSEO Settings and navigate to the ‘Schema’ tab. Then, click ‘Generate Schema.’

Clicking Generate Schema button on AIOSEO settings

Now, the Schema Generator pop-up will appear. In the Schema Catalog tab, look for the ‘Video’ schema template.

Go ahead and click the ‘+’ button next to the Video template.

Adding the Video schema template in AIOSEO

Now, you will be able to fill out your video information. In the first three fields, you can enter the video’s Name, Description, and Content URL.

For the Name and Description, feel free to use AIOSEO’s Smart Tags. These are predefined labels that can easily add existing information from your content, such as the post title, site title, and post excerpt.

As for the Content URL, you can enter the address of the video media file. That means the URL should end with the file format, like https://www.example.com/video/123/file.mp4

Google has said that providing your video’s Content URL is the best way for them to fetch your video file. But if you uploaded your video to a video hosting site like YouTube, then this may not be possible.

Scrolling down, you will find the Embed URL, Upload Date, Is Family Friendly, and Thumbnail URL settings.

AIOSEO's video schema template settings for the embed URL, upload date, family-friendliness, and thumbnail URL

You will use the Embed URL if you uploaded the video to a third-party service and don’t have access to the Content URL. Here, you need to enter the address to the video’s embeddable player, so it should look like https://www.example.com/embed/123

If you’ve uploaded the video to YouTube, then you can find the embed URL by opening the YouTube video and clicking the ‘Share’ button below the player.

After that, click ‘Embed’ in the popup window.

You will see a full video embed code in the next popup.

Note that you don’t need to copy-paste the whole thing. What you should do is block the URL that comes between the double quotes after the src= attribute.

This is your video’s Embed URL.

After that, copy-paste this URL back into AIOSEO’S Video Schema Generator.

For the Thumbnail URL, you can copy-paste your image URL into the field or upload a new image to the media library. Note that the minimum size is 112 pixels in width and height.

Once all the settings look good, simply click the ‘Add Schema’ button.

Clicking the Add Schema button on AIOSEO's Schema Generator

And that’s it!

Now, you should see a Video schema item in the Schema tab within the AIOSEO Settings.

Seeing the Video schema in AIOSEO Settings

4. Enable Lazy Loading

Lazy loading means your website delays loading certain content elements until someone scrolls to where the content is on the screen. When lazy loading is turned on for videos, your website will wait to load the video player and content until the viewer is about to watch it.

This makes your website load faster initially because it doesn’t have to load all the video elements at once.

To do this, you can use WP Rocket. It’s one of the best WordPress caching plugins on the market, and it comes with a feature to lazy load images and videos.

The first step is to install and activate the WP Rocket plugin. You can read our guide on how to install a WordPress plugin for more information.

Next, go to Settings » WP Rocket from your WordPress dashboard and navigate to the ‘Media’ tab. Then, simply check the ‘Enable for iframes and videos’ and the ‘Replace YouTube iframe with preview image’ boxes.

What the second checkbox means is that, instead of loading the actual video player immediately when someone visits your web page, only a static image representing the video is loaded first.

Enabling video lazy loading in WP Rocket

If you want to lazy load images as well, then you can check out our article on how to lazy load images in WordPress.

5. Use a Video CDN

CDN is short for content delivery network, which is a service that can speed up your website.

It works by storing your website’s content across multiple servers worldwide. When someone visits your site, the CDN serves the content from the server nearest to them. This reduces the distance the data needs to travel and makes your website load faster.

A video CDN is designed to efficiently deliver video content. It optimizes video streaming by storing copies of your videos on servers located strategically around the world.

If you followed our suggestion to upload videos to a third-party service, then having a video CDN won’t be necessary. But for people choosing to self-host their own videos, we recommend using Bunny.net.

Bunny.net is one of the best WordPress CDN services with a video delivery CDN feature. Your videos will be protected in their enterprise-grade storage, and viewers can watch your videos in high quality with no buffering.

If you are interested in using a CDN, then check out our list of the best WordPress CDN services.

Bonus Tips to Optimize Background Videos in WordPress

If you need to optimize background videos for your WordPress website, then you can use the following tips.

Remove the Audio

Audio can add significant weight to a video file. If you are only using a video as a background without sound, then it’s best to strip the audio.

You can easily remove audio from video using video editing software. For recommendations, see our list of the best video editing software.

Alternatively, you can use the free audio remover for videos by Adobe Express. Simply upload your video, and the tool will handle the sound removal for you. The video will then be downloadable as an MP4 file.

Adobe Express Free Audio Remover for Videos

Shorten the Duration

Shortening the video duration is another good way to do video compression for background or auto-play videos. This can decrease the overall file size, making it quicker to load and improving website performance.

Typically, 30 seconds or less in video length should be enough for a background video.

Again, you can use video editing software to reduce your video length. For a free online tool, you can use Canva or Adobe Express’s Video Trimmer.

Avoid Looping Forever

When using background or auto-play videos on your website, it’s essential to avoid endless looping. Looping is when the video keeps playing over and over, and it can consume a lot of bandwidth.

It’s also important to consider the context in which the video is displayed. If the video is a brief introduction or showcases a specific product, then a limited number of loops or a single playthrough is usually enough to communicate the message.

In WordPress, you can control the loop behavior of your YouTube video to reduce the strain on your website’s resources. Our guide on how to add a YouTube video as a full-screen background in WordPress shows you how.

Use a Good Contrasting Text Color

People who use an auto-playing video as their homepage background will usually put some text on top of it. In this situation, it’s good to use a text color that contrasts well with the video’s color scheme.

This way, the text remains easily readable and stands out prominently against the video background.

If you want tips and tricks on choosing a text color for your background video, visit our guide on how to choose the perfect color scheme.

Also, you can check out our article on the best WordPress themes for video websites to find designs that complement your website and video content.

FAQs About How to Optimize Videos for Your WordPress Website

Now, let’s address some common questions related to optimizing videos for your WordPress website.

1. What is the best video format for a WordPress website?

WordPress supports video file types like .mp4, .m4v, .mov, .wmv, .avi, .mpg, .ogv, .3gp, and .3g2.

It’s recommended to use MP4 with H.264 codec for the best balance between quality and file size.

2. How do I optimize a YouTube video in WordPress?

If you embed your YouTube videos, then WordPress will take care of the embedding process and ensure the video player loads efficiently.

However, you can optimize videos further by enabling lazy loading, compressing the video files, and setting up video schema markup and sitemap with AIOSEO. The last step ensures that search engines can understand and index your videos properly.

You can also check out our list of best YouTube video gallery plugins for WordPress for more features to enhance your website’s videos.

3. How do I make my WordPress video load faster?

To make your WordPress videos load faster, you can upload them to a third-party hosting service like YouTube or Vimeo. Self-hosting your own videos is not recommended, as it often requires more server resources and slows down your website.

You will also need to compress the videos to reduce their file sizes without compromising quality.

Additionally, it’s a good idea to enable lazy loading for video content. This ensures that your website loads quickly the first time, and the videos are only loaded when the visitor scrolls down to view them.

We hope this article has helped you learn how to optimize videos for websites. You may also want to check out our list of the best WordPress plugins for YouTube publishers and our tutorial on how to show the latest videos from your YouTube channel in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Optimize Videos for Your WordPress Website (Expert Tips) first appeared on WPBeginner.

November 28, 2023

How to Add Social Media Icons in Your WordPress Sidebar

Are you wondering how to add social media icons to your WordPress sidebar?

Adding social icons to your website is an easy way to let your audience know about your social media presence. That way, they can easily visit your social profiles and follow you online.

In this article, we will show you how to add social media icons to your WordPress sidebar.

How to Add Social Media Icons in Your WordPress Sidebar

A WordPress sidebar is an area on your website that is not a part of your main content. It’s where you can display additional information that readers may be interested in, such as your most recent blog posts and links to your social profiles.

Adding social links to your WordPress sidebar is a good idea because it tells users about your social media accounts. As a result, they can check them out, follow you, and help you grow your social media following.

What’s more, displaying your social media accounts can build a sense of credibility and serve as social proof. When visitors see that you have an active social media presence, this shows that your business is responsive and trustworthy.

Many popular WordPress blogs display social media icons in their sidebars, like WPBeginner:

WPBeginner's social media icons on the sidebar

Note: Social media icons are different from social share buttons on WordPress posts. If you are looking to add share buttons, then you can see our beginner’s guide on how to add social sharing icons in WordPress.

With that being said, let’s take a look at how to add social media follow icons to your WordPress sidebar. The method you should use depends on the WordPress theme and editor you are using. If you want to skip to a certain section, then you can use these quick links:

Method 1: Adding Social Icons With Full Site Editor (Block Themes)
Method 2: Adding Social Media Icons With WordPress Widgets (Classic Themes)
Method 3: Adding Custom Social Media Icons With SeedProd (Custom Themes)

If you are a block theme user, then you can add social media buttons to your WordPress sidebar using the Social Icons block.

Note that the process varies by the theme you use. Some block themes may include a sidebar by default, which you can then add the Social Icons block to. Some might also have a header pattern that functions like a sidebar, and some may not have a sidebar at all.

In this example, we will use a default WordPress block theme and show you how to create a sidebar for all your pages or posts where you can add the Social Icons block.

First, go to Appearance » Editor in your WordPress admin panel.

Selecting the Full-Site Editor from the WordPress admin panel

Next, you need to select ‘Templates.’

This will bring you to a page where you can edit the template of your pages and posts.

Choosing the Templates menu on WordPress Editor

Here, you can choose one of the page templates. It may be either ‘Pages’ or ‘Single Posts,’ depending on where you want the sidebar to be.

If you want the sidebar to show on both your static pages and posts, then you can edit both of them later. You can also customize the homepage template in case you need the sidebar to appear there, too.

In this case, we will select ‘Pages.’

Selecting Pages on the WordPress Editor Templates page

After that, click the pencil button in the left panel next to the three-dot button.

This will open up the WordPress editor.

Clicking the pencil edit button on Pages inside the WordPress editor

As you can see, the default theme doesn’t have a sidebar in the Pages template yet, so we need to create one for it.

To do this, you can hover over where you want to add the sidebar and click the add block ‘+’ button when it appears. Then, find and select ‘Columns.’

Selecting the Columns block on WordPress editor

There will be some variations to choose from.

In this example, we will use the ‘66 / 33’ option to imitate the standard look of a right sidebar.

Choosing one of the variations of the Columns block in WordPress editor

Once done, you can drag and drop the Post Content block to the left of the Columns block.

Your Pages template should look something like the image below, with the right column empty.

Moving the Post Content block to the left side of the Columns block

Now, click on the right column and select the add block ‘+’ button.

Then, search for the Social Icons block.

Searching for the Social Icons block to add to the Columns block

You can now start adding your social media platforms to the block. Simply click the ‘+’ button again and add your social media buttons one by one.

Feel free to use the search feature to browse all of the social network options.

Once you’ve added all of the buttons, you can start adding links to your social profiles.

All you need to do is click on a social icon and enter your profile URL.

Entering an Instagram account link to the Social Icons block

At this stage, you can customize how the icons look.

If the size of the buttons isn’t big or small enough, then you can use the ‘Size’ option in the block toolbar.

Customizing the buttons' sizes using the Social Icons block toolbar

In the Block Settings on the left, you can customize the icons’ justification, orientation, link settings, and labels.

We recommend making the links open in a new tab so that users won’t need to leave your website to visit your social profiles.

If you switch to the Block Styles tab, then you can change the icons’ styles and colors to suit your WordPress website design.

Depending on your preference, you can make all the icons have different colors or the same one, like below.

Configuring the Social Icons color and styles in the Block Styles tab

Scrolling down the same tab, you’ll find the Dimensions settings to customize the block margin and spacing.

These settings can be helpful if you want to adjust the spacing between the Social Icons block and other blocks in the sidebar.

Configuring the Dimensions settings of the Social Icons block

It’s also a good idea to add a call-to-action text on top of the Social Icons block to highlight where the buttons are and draw website visitors’ attention.

To do this, go ahead and add a Paragraph block using the ‘+’ button. Make sure it’s above the social icons.

Adding a Paragraph block on top of the Social Icons block

Some call-to-action examples you might use are ‘Follow Us, ‘Join Over X Readers,’ or ‘Get the Latest Updates.’

If you haven’t already, then you can also add more elements to the sidebar, like your featured posts and recent comments.

Now, simply click the ‘Save’ button in the top right corner of the page.

Clicking the Save button on the WordPress editor

And that’s it!

When you go to your WordPress website, you should now see a sidebar with some social links.

Example of what the Social Icons block looks like on the front end

If you want to create unique sidebars for different pages or posts, all of which include a Social Icons block, then we recommend creating a WordPress pattern or reusable block for your sidebar.

To learn more, you can check out our beginner’s guides on how to use WordPress block patterns and how to add reusable blocks.

This next method is for people using a classic WordPress theme with widget-ready sidebar areas.

To add social media buttons to your sidebar, simply head to Appearance » Widgets from your WordPress dashboard.

Then, navigate to the WordPress widget area where you want to add the Social Icons widget. In our example, we will select ‘Sidebar,’ but the name may be different depending on the theme you are using.

Navigating to the Appearance Widgets menu and selecting Sidebar on WordPress admin panel

Now, click the add block ‘+’ button at the top left, next to ‘Widgets.’

Here, you can look for the Social Icons block.

Choosing the Social Icons block in the WordPress Widgets settings

After that, you need to click on this sidebar widget or drag and drop it anywhere in the editing area.

In general, it’s best to add your social network icons close to the top of the widget area. This way, they can catch your visitors’ attention right from the moment they land on the page.

Then, similar to the previous method, you can click the ‘+’ button to add new social media buttons one by one to the widget.

In the example below, we have placed the Social Icons block below the Search block. We are also adding a WhatsApp icon.

Placing the Social Icons widget below the Search widget and adding the WhatsApp icon

At this point, you can start adding your social links.

For WhatsApp, you can type ‘wa.me/’ and write your WhatsApp number next to it. There is no need to use the + symbol, but make sure to add your country calling code, like in this screenshot.

Adding a WhatsApp number in the Social Icons block

You also have access to the Block Settings and Styles options in the right panel.

To open these options, you can click the ‘Settings’ icon in the top right corner.

Selecting the Settings icon on the Widgets page

Additionally, feel free to add a Paragraph block on top of the social media widget for your call-to-action text.

We recommend making the Paragraph and Social Icons blocks a Group so that they don’t look separated in the sidebar.

To do this, just select the Paragraph and Social Icons together. After that, click the ‘Transform’ icon in the block toolbar and select ‘Group.’

Grouping the Social Icons and Paragraph blocks

Once finished, go ahead and click the ‘Update’ button to make the changes official on all of your sidebars.

Here’s what the end result should look like:

An example of what the Social Icons widget looks like on the website

If you use SeedProd, then you will have more control over how your social media buttons look in your sidebar. For example, if you use a social media platform that WordPress doesn’t have an icon for, then you can create a button for it yourself.

Additionally, you can adjust the icon spacing specifically for mobile devices.

If you are new to SeedProd and want to use it, then you need to install and activate the plugin first. You will need the Pro version to be able to access the Social Profiles feature.

For more information on how to install a plugin, check out our guide on how to install a WordPress plugin.

Then, you can follow this tutorial to set up your theme with SeedProd.

Now, to add the social icons to the sidebar, you will need to go to SeedProd » Theme Builder. Then, hover over the ‘Sidebar’ template and click ‘Edit Design.’

Clicking Edit Design on the Sidebar template inside SeedProd

You are now inside the SeedProd page builder. The Social Profiles block should have been added by default to the theme template.

If it hasn’t, however, you can use the search bar in the left panel and type in ‘Social Profiles.’ After that, simply drag and drop the block to wherever is suitable for you.

Selecting the Social Profiles block on SeedProd

Don’t forget to add a Text block on top of the buttons and write some call-to-action text.

This way, you are directing visitors’ attention to the social media buttons in the sidebar.

Creating a Follow Us text on top of the Social Profiles block on SeedProd

To customize how the social media profile icons look, just click on the ‘Social Profiles’ element. Here, you will see different tabs to customize the buttons.

In the ‘Content’ tab, you can add more icons and change the icon style, icon size, and alignment.

Configuring the Content tab of the Social Profiles block in SeedProd

Besides the standard options like Instagram and Facebook, SeedProd also has buttons for Slack, Telegram, Github, and more.

To add a new social media icon that SeedProd doesn’t have by default, you need to click the ‘+ Add New Share’ button.

After that, select ‘Custom’ from the dropdown menu.

To edit the button, go ahead and click the gear settings symbol next to the arrow button.

Once you’ve done that, just select ‘Choose Icon.’

Now, you will be redirected to the Icon Library, where there are hundreds of brand icons to choose from, courtesy of Font Awesome icons.

In this example, we will use Airbnb.

Once you have selected an icon, you can adjust the color and add the link to the social media page.

Here, we’ve decided to stick with Airbnb’s brand color. When inserting the social account link, make sure to include the ‘https://’ as well.

Next is the ‘Templates’ tab.

If you switch to this tab, you can adjust the design of the icon. You can make it more square, circular, and/or monochromatic, depending on your preferences.

Editing the Templates setting for the Social Profiles block in SeedProd

Lastly, the ‘Advanced’ tab offers more ways to customize your social media buttons.

The Styles section is where you can change the icons’ style, color, size, space in between, and shadow effect.

The Styles tab in the Social Profiles block settings in SeedProd

In Spacing, you can edit the block’s margin and padding. What’s great about SeedProd is it allows you to make the margin and padding different for desktop and mobile devices.

To edit the margin and padding, just choose one of the device icons and insert your margin and padding measurements like so:

Configuring the Social Profiles block spacing in SeedProd

Scrolling down, you will find Device Visibility and Animation Effects.

In the first setting, you can opt to hide the block on desktop or mobile. This may be necessary if you have chosen to use the Social Profiles block in another part of your website and don’t want duplicate social profile icons.

With Animation Effects, you can select an animation style for the block when the icons are loaded on the web page. This effect is not necessary if you don’t want to distract the visitor too much from the main content.

SeedProd's Device Visibility and Animation Effect settings for the Social Profiles block

Once you have configured the Social Profiles block to your liking, simply click the ‘Save’ button in the top right corner.

Or, click the ‘Preview’ button to see how the sidebar looks first.

And that’s it! You have successfully added the social profiles block using SeedProd.

Here’s what the end result may look like:

Example of what the social media icons in the sidebar look like if made with SeedProd

We hope this step-by-step guide has helped you learn how to add social media icons to your WordPress sidebar. You may also want to check out how to display different sidebars for each post and page in WordPress and our list of the must-have WordPress plugins for business sites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Social Media Icons in Your WordPress Sidebar first appeared on WPBeginner.

January 24, 2022

How to Track Video Analytics in WordPress (Step by Step)

Do you want to know which videos your visitors watch the most on your WordPress website?

Videos are a great way to bring life to your website and boost engagement. By tracking video analytics, you can see how your videos are performing with metrics like total views, watch duration, and more.

In this article, we’ll show you how to track video analytics in WordPress using Google Analytics. This solution works for YouTube, Vimeo, and other HTML5 video embeds.

Why Track Video Engagement in WordPress?

Adding videos to your content makes your articles more engaging and helps in getting people to spend more time on your site.

However, if you have multiple videos on your WordPress site, then how do you which type of content is performing the best and whether people are watching your videos or not?

Tracking video engagement in Google Analytics can help you uncover these insights.

You can see how many people are watching videos on your WordPress website, whether they are clicking the play button, how much of the video they’re watching (watch duration), and more.

This helps in figuring out the type of media content your audience likes. Then you can create more videos on similar topics, and use the same format and style to boost user engagement.

That said, let’s look at how you can track video analytics on your WordPress website.

Setting Up Video Analytics in WordPress

The easiest way to track videos on your WordPress website is by using MonsterInsights. It’s the best WordPress analytics solution that helps you set up Google Analytics in WordPress without editing code or hiring a developer.

By default, Google Analytics does not track detailed video analytics.

However, the MonsterInsights Media addon makes it very easy to track videos that you’ve embedded from YouTube and Vimeo. It also tracks HTML 5 videos that you’ve uploaded through the WordPress media library.

Editor’s Note: We typically don’t recommend uploading videos to WordPress because it can use up a lot of storage space and slow down your website. Instead we recommend using YouTube, Vimeo, or other best video hosting sites.

There’s no need to touch a single line of code. MonsterInsights automatically tracks videos in Google Analytics in just a few clicks.

For this tutorial, we’ll use the MonsterInsights Pro version because it includes the Media addon and other advanced tracking features. There is also a MonsterInsights Lite version that you can use to try it out and get started with analytics on your site.

First, you’ll need to install and activate the MonsterInsights plugin. For more details, please see our guide on how to install a WordPress plugin.

Upon activation, you’ll be taken to the MonsterInsights welcome screen inside your WordPress dashboard. Go ahead and click the ‘Launch the Wizard’ button to configure the plugin and connect Google Analytics with WordPress.

You can follow our step-by-step guide on how to add Google Analytics to WordPress.

Next, you’ll need to head over to Insights » Addons from your WordPress admin area and then scroll down to the ‘Media’ addon.

Go ahead and click the ‘Install’ button and the addon will then install and activate. You will see the ‘Status’ change from Not Installed to Active.

Once the addon is active, simply navigate to Insights » Settings from the WordPress admin panel and then go to the ‘Publisher’ tab.

After that, you can scroll down to the Media Tracking section. You’ll notice that the toggles for tracking HTML 5, YouTube, and Vimeo videos will be enabled.

MonsterInsights will now start to track videos on your WordPress site. You can now visit your Google Analytics account to view the report.

Viewing Video Tracking Data in Google Analytics

To see how your videos are performing, you’ll need to go to the Google Analytics website and log in to your account.

Next, you can choose your website (property) from the dropdown menu at the top.

After that, you’ll need to head over to Behavior » Events » Top Events from the menu in the left column.

You’ll see separate Event Categories for video tracking such as video-youtube, video-vimeo, or video-html.

Now, go ahead and click on an video Event Category like ‘video-youtube’.

Here you can view the number of impressions, and what percentage of the video was watched.

Impressions tell you how many users viewed your videos.

The numbers are the percentage of the video that was watched. For example, a 0 event action shows that viewers clicked the play button but watched less than 25% of the video.

Similarly, 50 shows that viewers watched at least half the video but less than 75%, while 100 means that users viewed the entire video.

Next, if you click on an Event Action, you can then view the video URLs. For example, if you want to know which videos people watched till the end, then go ahead and click on the ‘100’.

On the next screen, you can see the links to the videos under the Event Label column.

Now that you know which videos are getting the most engagement on your website, you can plan more similar content for your audience. You can also experiment to get more video views by embedding a YouTube channel on your website, or creating a video gallery.

We hope this article helped you learn how to track video analytics in WordPress. You can also see our guide on how to register a domain name and the best free website hosting compared.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Track Video Analytics in WordPress (Step by Step) first appeared on WPBeginner.

June 21, 2019

Weekly Platform News: Mozilla’s AV1 Encoder, Samsung One UI CSS, DOM Matches Method

Šime posts regular content for web developers on webplatform.news.

In this week's weekly roundup, Vimeo and Mozilla partner up on a video encoding format, how to bind instructions to to form fields using aria labels, the DOM has a matching function, and Samsung is working on its own CSS library.

Vimeo partners with Mozilla to use their rav1e encoder

Vittorio Giovara: AV1 is a royalty-free video codec designed by the Alliance for Open Media and the the most anticipated successor of H.264. Vimeo is contributing to the development of Mozilla’s AV1 encoder.

In order for AV1 to succeed, there is a need of an encoder like x264, a free and open source encoder, written by the community, for the community, and available to everyone: rav1e. Vimeo believes in what Mozilla is doing.

Use aria-describedby to bind instructions to form fields

Raghavendra Satish Peri: If you provide additional instructions for a form field, use the aria-describedby attribute to bind the instruction to the field. Otherwise, assistive technology users who use the Tab key might miss this information.

<label for="dob">Date of Birth</label>
<input type="text" aria-describedby="dob1" id="dob" />
<span id="dob1">Use DD/MM/YY</span>

Samsung Internet announces One UI CSS

Diego González: Samsung is experimentally developing a CSS library based on its new One UI design language. The library is called One UI CSS and includes styles for common form controls such as buttons, menus, and sliders, as well as other assets (web fonts, SVG icons, polyfills).

Some of the controls present in One UI CSS.

DOM elements have a matches method

Sam Thorogood: You can use the matches method to test if a DOM element has a specific CSS class, attribute or ID value. This method accepts a CSS selector and returns true if the element matches the given selector.

el.classList.has('foo')  /* becomes */ el.matches('.foo');
el.hasAttribute('hello') /* becomes */ el.matches('[hello]');
el.id === 'bar'          /* becomes */ el.matches('#bar');

The post Weekly Platform News: Mozilla’s AV1 Encoder, Samsung One UI CSS, DOM Matches Method appeared first on CSS-Tricks.

Why Optimize Videos for Websites?

1. Use a Video Hosting Service

2. Compress Your Video Before Uploading It

3. Set Up Your Video Sitemap and Schema Markup

4. Enable Lazy Loading

5. Use a Video CDN

Bonus Tips to Optimize Background Videos in WordPress

FAQs About How to Optimize Videos for Your WordPress Website

Why Add Social Media Icons to Your WordPress Sidebar?

Method 1: Adding Social Icons With Full Site Editor (Block Themes)

Method 2: Adding Social Media Icons With WordPress Widgets (Classic Themes)

Method 3: Adding Custom Social Media Icons With SeedProd (Custom Themes)

Why Track Video Engagement in WordPress?

Setting Up Video Analytics in WordPress

Viewing Video Tracking Data in Google Analytics

Vimeo partners with Mozilla to use their rav1e encoder

Use aria-describedby to bind instructions to form fields

Samsung Internet announces One UI CSS

DOM elements have a matches method