web_video Shortcode
The web_video shortcode renders the video component.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Usage
[web_video]For a silent product-feature loop that starts when at least half of the video enters the viewport and keeps the source video's dimensions:
[web_video video_type="self-hosted" video_mp4_url="https://example.com/feature.mp4" video_autoplay_viewport="yes" video_loop="yes" video_controls="" video_aspect_ratio="original"]Browser autoplay policies require autoplaying videos to be muted. The shortcode does this automatically for immediate, viewport, first-interaction, and hover autoplay. Leave Fullscreen play toggle disabled when the video should render inside the page.
Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
video_type |
— | youtube, vimeo, self-hosted |
Choose the video source. |
video_youtube_url |
— | String unless stated otherwise | Add YouTube link. Example: https://www.youtube.com/watch?v=##########. Available when video_type is youtube. |
video_vimeo_url |
— | String unless stated otherwise | Add Vimeo link. Example: https://vimeo.com/##########. Available when video_type is vimeo. |
video_mp4_url |
— | HTTPS video URL or a Pomatio Video Hosting logical URL | Add an MP4 link or paste Logical video URL from Media → Videos → Details. Both are treated as self-hosted sources. Available when video_type is self-hosted. |
video_webm_url |
— | String unless stated otherwise | Add video link. Example: https://your-domain.com/##########.webm. Available when video_type is self-hosted. |
video_ogv_url |
— | String unless stated otherwise | Add video link. Example: https://your-domain.com/##########.ogv. Available when video_type is self-hosted. |
video_thumbnail |
— | String unless stated otherwise | Select the image to be displayed as a thumbnail. |
video_autoplay |
— | yes |
Start muted playback automatically. With a poster, the poster remains visible until playback actually starts. |
video_start_after_interaction |
— | yes |
Creates and starts the muted player after the first pointer movement or action, touch, key press, wheel movement, or scroll. Videos using the fullscreen play toggle still wait for their own button click. |
video_autoplay_viewport |
— | yes |
Start muted playback when at least half of the video enters the viewport. |
video_autoplay_hover |
— | yes |
Start playing video when hovering with the mouse. |
video_loop |
— | yes |
Play the video in an infinite loop. |
video_controls |
yes |
yes |
Show video controls. Leave empty to hide every control, including for decorative autoplay loops. |
video_control_volume |
yes |
yes |
Show the custom player's volume control. |
video_control_time |
yes |
yes |
Show the custom player's current time and duration. |
video_control_progress |
yes |
yes |
Show the custom player's progress bar. |
video_control_subtitles |
yes |
yes |
Show the custom player's subtitles control when tracks are available. |
video_control_quality |
yes |
yes |
Show the custom player's adaptive-quality selector when multiple renditions are available. |
video_control_speed |
yes |
yes |
Show the custom player's playback-speed menu. |
video_control_pip |
yes |
yes |
Show the custom player's Picture in Picture control when the browser supports it. |
video_control_fullscreen |
yes |
yes |
Show the custom player's fullscreen control. |
video_play_toggle_button |
— | yes |
Display only a play button and open the video in a modal when the visitor selects it. |
video_play_toggle_button_style |
big_play |
big_play, 1, or a configured button-style slug |
Chooses the large play control or a button style defined in the POM design system. Available when video_play_toggle_button is yes. |
video_play_toggle_button_text |
Watch video |
String unless stated otherwise | Controls the text on the button. Available when video_play_toggle_button_style is 1. |
video_play_toggle_button_aria_label |
Visible button text or Watch video |
Text | Sets the accessible name of the fullscreen video link. When empty, a visible button uses its text and the large play control uses Watch video. Available when video_play_toggle_button is yes. |
video_play_toggle_button_icon |
— | String unless stated otherwise | Select the icon to be displayed within the button. Available when video_play_toggle_button_style is 1. |
video_aspect_ratio |
horizontal |
horizontal, vertical, square, original, custom |
Uses 16:9, 9:16, 1:1, the dimensions reported by the source video, or a custom ratio. Existing shortcodes remain 16:9 by default. YouTube and Vimeo fall back to 16:9 when the provider does not expose intrinsic dimensions. |
video_aspect_ratio_width |
16 |
Positive number up to 10000 | Width part of the ratio when video_aspect_ratio is custom, for example 4. |
video_aspect_ratio_height |
9 |
Positive number up to 10000 | Height part of the ratio when video_aspect_ratio is custom, for example 3. |
device_visibility |
— | String unless stated otherwise | Applies the selected responsive visibility rule. |
el_class |
— | String unless stated otherwise | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
Customize the stylesheet
Go to Settings → POM Theme → Advanced → Custom CSS, expand Shortcode CSS assets, and open Video. The comparison shows the readable CSS generated by the current theme beside the editable source. Saving creates an optimized per-site replacement for the existing web-video stylesheet; reverting restores the current video.min.css asset.
The replacement changes CSS only. It does not change web_video, provider and source resolution, inline or fullscreen markup, playback, controls, autoplay modes, looping, aspect ratios, posters, buttons, accessibility labels, or request conditions. The existing web_video and web-jarallax-video scripts, their dependencies, VideoWorker behavior, modal fullscreen, and custom-player assets remain unchanged. Pages without Video content continue loading none of these module assets.
Verification
Check web_video with the intended media, an appropriate responsive size and any required alternative text or transcript. For an inline product-feature video, disable controls, enable the intended autoplay mode and loop, and verify its size before and after metadata loads. Test Original video ratio with a non-16:9 self-hosted source and Custom with both width and height values. When using the fullscreen play toggle, inspect the link and confirm that its aria-label describes the video action.
After editing the stylesheet, verify that inline playback and pause still work, open and close the fullscreen presentation with its button and Escape, and confirm that the configured scripts remain unchanged. A page without web_video must load neither the Video stylesheet nor its module and Jarallax Video scripts.
Choose the self-hosted player globally under Settings → POM Theme → Design system → Components → Video player. Default player preserves the existing theme player for direct media and Pomatio Video Hosting logical URLs. Custom player (Video.js 10) can use the standard Video.js skin or the theme's custom skin. The custom skin applies the global controls and accent colors to icons, labels, progress, and selected states. Its optional background color is empty by default and, when set, fills the complete control bar and its menus. Those color fields are hidden while the default skin is selected. Both Video.js skins enable the individual control choices above; those granular control fields are hidden from the Page Builder component while the default player is selected. The custom player entry is loaded only on pages that render a custom player, a hosted-video post, or a hosted playlist. Its HLS runtime is requested separately only when adaptive HLS playback is required; direct MP4, WebM, and OGV sources do not download that larger runtime. New hosted generations always include the standard progressive rendition independently from Scroll. If an older hosted logical URL has not yet completed that backfill, the shortcode temporarily uses its private HLS transport so the video remains playable instead of sending an unavailable URL to the legacy player.
For a Pomatio Video Hosting logical URL, confirm that playback works with the selected global player and that no permanent CloudFront or storage URL appears in the saved shortcode. The rendered page remains eligible for full-page caching because it contains only the stable logical asset identity; Pomatio Video Hosting checks current access and supplies short-lived delivery credentials when playback starts. With the custom player, also verify seeking, adaptive quality when several renditions are available, the configured controls, fullscreen entry and exit, and a compact thumbnail preview while pointing at the timeline. Fullscreen keeps the complete player container and its configured skin; browsers without container fullscreen use their native video presentation. Hosted HLS begins in Auto quality, caps the rendition to the physical player width including the screen pixel ratio, and reduces quality when measured bandwidth cannot sustain it. For looped HLS playback, the player preserves reusable back-buffer segments across quality changes when the browser permits it, reducing avoidable repeat downloads without guaranteeing that the browser will retain every segment. Autoplay, viewport autoplay, hover autoplay, looping, first-interaction loading, the poster, and the fullscreen play toggle keep their shortcode-level behavior. When any autoplay mode and a poster are enabled, the poster is the only visible player content until playback starts; the player does not display a loading message or spinner over it.