Set up random videos

To set up random videos you will need to add a PHP function, it doesn’t matter what you set in the theme options panel, we will override the settings in the PHP function. In the theme functions.php file, add the following code and modify it to suit.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
add_filter('tcr_video', 'mytheme_random_video', 10, 1);
 
function mytheme_random_video($video)
{
    // Set up the list of available videos
    $videos = array(
        // Video #1:
        array(
            'url' => 'http://vimeo.com/45878034',
            'autostart' => true,
            'complete' => 'restart',
            'width' => 1920,
            'height' => 1080,
            'start' => 0
        ),
        // Video #2:
        array(
            'url' => 'http://vimeo.com/47015825',
            'autostart' => true,
            'complete' => 'restart',
            'width' => 1920,
            'height' => 1080,
            'start' => 0
        ),
        // Video #3:
        array(
            'url' => 'http://www.youtube.com/watch?v=T82LpzWEx7U',
            'autostart' => true,
            'complete' => 'restart',
            'width' => 640,
            'height' => 360,
            'start' => 0
        ),
    );
 
    // Return a random one
    return $videos[array_rand($videos)];
}
add_filter('tcr_video', 'mytheme_random_video', 10, 1);

function mytheme_random_video($video)
{
    // Set up the list of available videos
    $videos = array(
        // Video #1:
        array(
            'url' => 'http://vimeo.com/45878034',
            'autostart' => true,
            'complete' => 'restart',
            'width' => 1920,
            'height' => 1080,
            'start' => 0
        ),
        // Video #2:
        array(
            'url' => 'http://vimeo.com/47015825',
            'autostart' => true,
            'complete' => 'restart',
            'width' => 1920,
            'height' => 1080,
            'start' => 0
        ),
        // Video #3:
        array(
            'url' => 'http://www.youtube.com/watch?v=T82LpzWEx7U',
            'autostart' => true,
            'complete' => 'restart',
            'width' => 640,
            'height' => 360,
            'start' => 0
        ),
    );

    // Return a random one
    return $videos[array_rand($videos)];
}

In this code we set up an array with the configuration for 3 videos, and return a random one. Each time the page is loaded a random video will be picked from this list. You can add more videos by adding another configuration array for another video. The configuration array for each video should be set up like so:

1
2
3
4
5
6
7
8
array(
    'url' => 'http://www.youtube.com/watch?v=T82LpzWEx7U', // The URL to the video
    'autostart' => true, // Start the video automatically, true or false
    'complete' => 'restart', // What to do when finished playing, 'none', 'hide', 'restart'
    'width' => 640, // The width of the original video (see below)
    'height' => 360, // The height of the original video (see below)
    'start' => 0 // The start position of the video in seconds
),
array(
    'url' => 'http://www.youtube.com/watch?v=T82LpzWEx7U', // The URL to the video
    'autostart' => true, // Start the video automatically, true or false
    'complete' => 'restart', // What to do when finished playing, 'none', 'hide', 'restart'
    'width' => 640, // The width of the original video (see below)
    'height' => 360, // The height of the original video (see below)
    'start' => 0 // The start position of the video in seconds
),

The width and height are used to scale the video accurately. Use the instructions below to find the dimensions for each video.

Find the width/height of the video (Vimeo)

The Storm theme has built in functionality to find the width/height of a Vimeo video. If you go to the theme options panel, then Background → Video. In the Video URL field, paste in the URL to your video then click off (blur) the field. The width and height of the video will appear in the Video dimensions. Navigate to another page without saving to avoid saving any permanent changes.

Find the width/height of the video (YouTube)

You will need to find the dimensions manually, If you go to the theme options panel, then Background → Video. In the Video dimensions field, see the description on the right hand side and click the link find the dimensions manually for instructions.

Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy