Content Slider with Video Background

Beaver Builder
1

Hi, would you advise how to add video background to my grand template beaver builder? I want to change slide setting from photo to video background.In the slide setting, there is background video code, what is that and how to get background video code? Thank you for your assistance.

Best regards,
coki

2

Continuing to my question above, how many megabytes that is suitable for a video background? is there a min and max for the video to be able to work perfectly as the video background? Kindly advised! Thanks.

Best,
coki

3

Hi coki,
for the background video code you can cut and paste some embed code, like

<iframe width="560" height="315" src="https://www.youtube.com/embed/tg8KFyuzXzM" frameborder="0" allowfullscreen></iframe>

or

<iframe src="//player.vimeo.com/video/118342272?color=f56218&badge=0" width="500" height="263" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>.

If you need an HTML5 player for self-hosted or external videos use a WP shortcode like

[video mp4="http://video-js.zencoder.com/oceans-clip.mp4" ogv="http://video-js.zencoder.com/oceans-clip.ogv" webm="http://video-js.zencoder.com/oceans-clip.webm"] (see: http://codex.wordpress.org/Video_Shortcode for full options)

About the video size for the background, that’s a complex matter, a quick hint is to consider the bitrate instead of the total size.
If you’re using the video for a front cover especially, you may want the video to start streaming as soon as possible and generally stay in a range between 1500 to 2500 kbit/s for a decent quality/accessibility compromise. But a fast moving video or a fixed panorama are different beasts and your results may vary.

Regards,
Alessandro

4

Dear Alessandro,

Thank you for your reply. May I ask again as I am still confused. I have tried but it did not work.

You mean I copy and paste the code you given above to my grand template beaver builder in the background video code in content slider with this code:<iframe width=“560” height=“315” src=“https://www.youtube.com/embed/tg8KFyuzXzM” frameborder=“0” allowfullscreen></iframe>

I have tried but nothing happened sir. Could you explain step by step sir?

Basically, I just want to edit the content slider in the grand template beaver builder from photo to video, but when I chose video I am asked to give the background video code. And I do not know where to get this code. I have upload my video to the media library. Will you advise one more time sir? as I am still confused where to get the code. Thank you.

Best regards,
coki

5

Hi coki,
here is a step by step guide:

  • click the wrench icon on the Content Slider module
  • click the Slides tab
  • click Edit Slide on the slide you want to modify
  • in Background Layout Type choose Video
  • paste a video embed code or WP shortcode in the Background Video Code field

this steps work well here, I’ve tried modifying the layout from the built-in “grand” template.

To get the URL for a video you’ve uploaded on your WP install, just open the media library, locate and click on the video, you’ll find the URL there.

Please note that for cross browser HTML5 Video compatibility you’ll need to have your video encoded in multiple formats as the example on the previous post.

Regards,
Alessandro

6

Dear Alessandro,

I have tried as your suggested but strange it did not work.

Will you or Mr.Justin take a look to my web admin and give the solution for me? I have upload one video at the media library and wish that you can add this video to content slider (grand template) by editing the photo type to video type.

Thank you very much.

Regards,
coki

7

[Content Hidden]