The reason why you can't insert the video into the Magento 2 page may be an invalid API key, a wrong code, or an incorrect encoding. To find out what the cause is, try the following steps.
Zero step: If you haven't done it yet, check out this quick tutorial on embedding videos into product pages, there might be something wrong with the basic settings:
1. The video is displayed as a screenshot
When inserting videos into product pages, you may come across the problem that videos are only displayed as screenshots.
There are two ways: deal with it and leave things as they are, or fix it. By the way, the number of clicks on the page will increase due to the fact that people will try to run the video. Unfortunately, these clicks won't do you any good.
- If you favor the fix option, here's what you can try to do to resolve the issue:
make sure you have a valid API key configured for YouTube integration - determine if it is a problem with your theme or custom module by disabling the custom theme. To do this, go to Admin > Content > Configuration, and check if the error remains
- if the problem is not with your theme, you may have to disable third-party modules one-by-one until you find the cause
2. The video is not playing
While creating a web page and trying to insert a video, you may encounter one more issue: you press play, but only the sound is played, not the video.
All in all, you can do nothing to fix it – just enjoy the sound and develop your imagination.
Yet there is a solution as well. The cause of the issue is that the file is encoded incorrectly. HTML5 supports very few types, and every browser can only play a certain part of that list.
You just need to convert your mp4 file to H.264 encoding, and everything will work properly.
3. The video doesn't embed
Having difficulties with embedding a video on a home page? Try using the following code, where source src= is the path to your video uploaded to the host.
Navigate to Admin Panel > Content > Pages. Select Home Page, click Show/hide editor in the content tab, and place the <iframe> code:
<video controls>
<source src=https://website.com/demo/videos/file.webm type=video/webm>
<source src=https://website.com/demo/videos/file.ogv type=video/ogg>
<source src=https://website.com/demo/videos/file.mp4 type=video/mp4>
<source src=https://website.com/demo/videos/file.3gp type=video/3gp>
</video>
Be aware of the downside of using videos – they slow down the site, which affects the SEO performance of your store and can drop your website from search results.
Basic rules for optimizing video usage:
1. use data compression tools to reduce the size of video files
2. convert videos to HTML5-supported formats
3. remove the audio from the muted videos to save on video size
4. specify the size of the video when you insert it
5. use lazy loading
So, these were the most common ways to fix the basic problems with video embedding. Still have questions? Feel free to ask them in the comments section and our team will provide you with solutions.
