How to add a responsive video on your website which works on all devices and browsers?
If you want to use responsive videos on your website, we offer you the following solution (our team has checked it. )
The solution displays fine results in all browsers and devices):
- install this plugin: https://wordpress.org/plugins/advanced-responsive-video-embedder/
- upload your video in WordPress Media: http://prntscr.com/vr3ahj
To avoid any issues with video, please use the .mp4 format for your videos. If your default video doesn't appear in a browser, please convert it to .mp4 format via this program:
https://drive.google.com/file/d/1BBfQxY7mHcsmAXBDuILl-AM2NI29k31-/view?usp=sharing
Here are the correct settings for it: http://prntscr.com/12ipgl1
- then insert in Text Block element via page builder this shortcode (as an example): http://prntscr.com/vr2eh4
[arve url="http://yourwebsite.com/wp-content/uploads/2020/11/Audio-Video-Sync-Test-YouTube.mp4" /]
Save changes.
- after all these steps you'll receive these results:
The video will be responsive on all devices.
Maybe you'll ask, why don't you use Youtube or other video network links inside shortcode?
The response is simple - we don't use it, because very often these video networks change their API's and video appears incorrect at the front-end.
Moreover, such elements as the related videos or different kinds of ads divert your visitors.
Best Regards!