Step 1: Add PHP Code
First, we'll add some PHP code that will do the heavy lifting for us. You only need to add it once, and shouldn't need to modify it. It's main function is to scan the content of the page for Divi's video slider shortcode and add a video slide item for each of an array of videos.
class DBCDynamicVideoSlider {
public function __construct($id, array $videos) {
$this->id = $id;
$this->videos = $videos;
}
public function init() {
add_filter('the_content', array($this, 'modify_slider'));
}
function modify_slider($content) {
return preg_replace_callback(
'/(\[et_pb_video_slider [^]]*module_id="'.preg_quote($this->id, '/').'"[^]]*\])(.*?)(\[\/et_pb_video_slider\])/is',
array($this, 'add_slides'),
$content
);
}
function add_slides($match) {
$items = array();
foreach($this->videos as $url) {
$items[] = str_replace(
' src="https://www.youtube.com/watch?v=FkQuawiGWUw"',
' src="'.esc_attr($url).'"',
$match[2]
);
}
return $match[1].implode('', $items).$match[3];
}
}Related Post: Adding PHP to the Divi Theme
Step 2: Set up the Video Slider Module
First, add a video slider module to your page. It should by default have a single video, called "New Item" configured with the URL for a video about Divi, i.e.:
Leave that video configured as is. You can style it if you like, but leave the Divi video in place. Our code below will use the item as a template. Don't delete the "New Item" video, or add any other items.
Now give the Video Slider module a CSS ID of (for example) "dynamic-slider" at:
Video Slider Settings > Advanced > CSS ID & Classes > CSS ID
Like so:
Step 3: Load the Videos via PHP
Now we need to call our earlier PHP code with the CSS ID of our slider and a list of videos to use. Here I'm just specifying the videos in a PHP array directly, but in a more realistic scenario these might be pulled in from a custom field, or retrieved from an external API.
$videos = array(
'https://www.youtube.com/watch?v=cbP2N1BQdYc', // cat video #1
'https://www.youtube.com/watch?v=lZqqMtW87hU', // cat video #2
'https://www.youtube.com/watch?v=jk0is7dZrK0', // cat video #3
'https://www.youtube.com/watch?v=uHKfrz65KSU', // cat video #4
);
(new DBCDynamicVideoSlider('dynamic-slider', $videos))->init();Step 4: View the Result
If all is well, we should now see our videos displayed in the video slider on the front-end, e.g.:
0 Comments