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. To do so, 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 React theme has built-in functionality to find the width/height of a Vimeo video. Go to the theme options panel, then Background → Video. In the Video URL field, you can 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. Go to the theme options panel, then Background → Video. In the Video dimensions field, find the description on the right-hand side and click the link Find the dimensions manually for instructions.