Skip to main content

Using the Shortcode

The shortcode is the backbone of the entire Video Background Pro plugin. Whether or not you realize it, every other way to create a video background (metabox, WPBakery, SiteOrigin) all end up using the shortcode to initialize the plugin and add it to your website.

Parameters

The shortcode has parameters that you can specify to tailor your video background experience.

It's important to note that due to the way that shortcodes are implemented, every value is interpreted as a string.

ParameterDescriptionTypeAcceptsDefault Value
containerThe container value. This is where your video background will go. This parameter is required.AnyAny DOM Element""
typeThe type of video background you would like.Anyself-host, youtube, vimeo"self-host"
mp4The .mp4 file link.self-hostAny URL with an .mp4 file extension."null"
webmThe .webm file link.self-hostAny URL with a .webm file extension."null"
youtube_urlThe YouTube URL. Can be any type of YouTube URL (shortened, regular, embed, etc).youtubeAny YouTube video URL."null"
youtube_startThe YouTube video background start second. This must be a number, not the minutes and seconds. For example, if you want the video to start at 1:32, you would input 92.youtubeA number less than the total amount of seconds in the YouTube video."0"
youtube_endThe YouTube video background end second. This must be a number, not the minutes and seconds. For example, if you want the video to end at 1:32, you would input 92.youtubeA number less than the total amount of seconds in the YouTube video."null"
vimeo_urlThe Vimeo video URL.vimeoA Vimeo Video URL ex. https://vimeo.com/xxxx where "xxxx" is the ID."null"
posterThe poster image will be shown while the video is loading and for devices/browsers that do not support video backgrounds.AnyAny URL to an image. .png and .jpg are recommended."null"
end_frame_posterThis option will add the poster image to the video background once it stops playing. The loop parameter must be set to false for this to work.Anytrue or false"false"
mutedThis option has been depreciated due to browser restrictions. As of Video Background Pro 3.0.0 this option will no longer do anything.Anytrue or false"true"
loopThis option will dictate whether or not the video background will loop.Anytrue or false"true"
overlayTo enable the overlay or not.Anytrue or false"false"
overlay_colorSpecify the color of the overlay as a hex color. The overlay parameter must be set to true for this to take effect.AnyAny Hex color."#000"
overlay_alphaSpecify the amount of transparency your overlay will have. This can be useful for text legibility.AnyA value between 0.00 and 1.00 where 0.00 is completely transparent and 1.00 begin opaque."0.3"
overlay_texture_urlThis option was depreciated in Video Background Pro 4.0.0, and will no longer do anything.AnyAny URL to an image."#"
frontend_play_buttonToggle a play/pause button for the video background.Anytrue or false"false"
frontend_volume_buttonToggle a mute/unmute button for the video background.Anytrue or false"false"
frontend_positionSpecify the position of the frontend buttons. Either frontend_play_button, frontend_volume_button or both must be enabled.Anybottom-right, bottom-left, top-right, top-left"bottom-right"
enable_loaderThis option was depreciated in Video Background Pro 4.0.0, and will no longer do anything.Anytrue or false"false"
play_on_mobileThis option was depreciated in Video Background Pro 4.0.0, and will no longer do anything. Now, the video background will play on any mobile browser that supports HTML5 <video>.Anytrue or false"true"
player_optionsAllows you to interact with the player's API. Can be used for self-host, youtube, and vimeo video backgrounds. Make a JSON string of an object with the options that you would like to add/override.AnyA JSON String with an object of key:value pairs."null"
frontend_containerUse this option if you'd like to re-position your frontend buttons. Used just like the container parameter, simply provide a DOM element for it to be moved to.AnyAny DOM Element"null"

Constructing the Shortcode

When you are constructing the shortcode, you only need to add the parameters that matter to you. In this instance, say we have a container .my-section-5 and we want a YouTube video background of Rick Astley's "Never Gonna Give You Up". Our shortcode would look something like this:

[vidbg container=".my-section-5" type="youtube" youtube_url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"]