ComboDocs

Videos

The videos utility function provides a tool for generating HTML video tags with support for lazy loading and custom attributes.

Available Function

cbo_video($url, $options)

Generates an HTML video tag with various options.

Parameters:

  • $url: URL of the video.
  • $options: Configuration options for the video tag.

Options:

  • echo: Display directly (true) or return HTML (false) (default: true).
  • lazy: Enable lazy loading (default: true).
  • lazyClass: CSS class for lazy loading (default: 'lazy').
  • class: Additional CSS classes (default: '').
  • type: MIME type of the video (default: 'video/mp4').
  • attr: Additional HTML attributes (default: 'playsinline controls').

Return Value:

Returns the HTML video tag if echo is false, otherwise outputs it directly.

1
// Basic usage
2
$video_url = 'https://example.com/video.mp4';
3
cbo_video($video_url);
4
5
// With custom options
6
cbo_video($video_url, [
7
  'class' => 'featured-video',
8
  'attr' => 'playsinline controls autoplay muted loop',
9
  'lazy' => true
10
]);
11
12
// Return HTML instead of echoing
13
$video_html = cbo_video($video_url, [
14
  'echo' => false,
15
  'class' => 'hero-video'
16
]);
17
18
// Later use the HTML
19
echo '<div class="video-container">';
20
echo $video_html;
21
echo '</div>';

Usage Examples

Background Video

1
// Create a background video
2
function display_background_video($video_url) {
3
  echo '<div class="background-video-container">';
4
  cbo_video($video_url, [
5
    'attr' => 'playsinline autoplay muted loop',
6
    'class' => 'background-video',
7
    'lazy' => false // Background videos should load immediately
8
  ]);
9
  echo '</div>';
10
}
11
12
// Usage
13
display_background_video('https://example.com/background.mp4');

Video with Poster Image

1
// Display a video with a poster image
2
function display_video_with_poster($video_url, $poster_url) {
3
  echo '<div class="video-wrapper">';
4
  cbo_video($video_url, [
5
    'attr' => 'playsinline controls poster="' . esc_url($poster_url) . '"',
6
    'class' => 'content-video'
7
  ]);
8
  echo '</div>';
9
}
10
11
// Usage
12
display_video_with_poster(
13
  'https://example.com/video.mp4',
14
  'https://example.com/poster.jpg'
15
);

ACF Video Field

1
// Display a video from an ACF field
2
function display_acf_video($post_id = null) {
3
  if (!$post_id) {
4
    $post_id = get_the_ID();
5
  }
6
  
7
  $video = get_field('video', $post_id);
8
  
9
  if (!$video) {
10
    return;
11
  }
12
  
13
  echo '<div class="featured-video-container">';
14
  echo '<h3>' . get_field('video_title', $post_id) . '</h3>';
15
  
16
  cbo_video($video['url'], [
17
    'class' => 'featured-video',
18
    'attr' => 'playsinline controls'
19
  ]);
20
  
21
  if (get_field('video_caption', $post_id)) {
22
    echo '<p class="video-caption">' . get_field('video_caption', $post_id) . '</p>';
23
  }
24
  
25
  echo '</div>';
26
}
27
28
// Usage
29
display_acf_video();

Best Practices

  • Use lazy loading for videos that are not immediately visible to improve page load performance.
  • Always include controls for user-interactive videos.
  • Use muted and autoplay for background videos.
  • Include a poster image to display before the video loads.
  • Consider mobile users by using the playsinline attribute for iOS compatibility.
← TranslationsStrings →