Video Modals are a common way of displaying a new feature of your product or even to present your visitors something else. YouTube API provides us with a better control over videos hosted on YouTube. In this tutorial we will create a Video Modal using WordPress shortcodes. By setting a shortcode in our content, we will display a button that will open a video in a modal.
We will create a simple plugin that will enable our shortcode to be rendered as a button. You are free to customize it as you want or even create another shortcode to display a video inside the content.
Try this plugin right now by downloading it here: youtube-modal.
Before we begin, let’s learn more about the YouTube API here. The initial code present there will also be used in our plugin. I encourage you to read more about it there when you have time.
When starting our video, we will create a reference to the YouTube Player object. By doing that, we will be able to control the video by pausing it, stoping it or even loading another one.
We will now learn more about the YouTube API functions that we can use on our player object. This functions can be called like this:
I will list some of the functions here as a reference to what the YouTube API can do, but I will not go over them in details. If you would like to learn more about some of those functions, click on them.
- loadVideoById – load a video by providing the YouTube ID. You can control when the video is going to start or end.
- cueVideoByUrl – create the player from the URL. This will not load or start the player until you start it.
- loadVideoByUrl – load the video from the URL. It loads and plays the video.
There are also functions for playlists that can be used in a similar way.
Here are only some of the functions, but there are many more of them that can be used with YouTube API. I will show you some that may interest you when working with a video.
- playVideo – plays the video or resumes the video if paused
- pauseVideo – pauses the video
- stopVideo – stops the video
- seekTo – plays the video on a set number of seconds. If the video is not buffered on that time, you can set it to buffer ahead
- setVolume – pass an integer from 0 to 100
This functions are indicators that will show us the status of our video.
- getVideoLoadedFraction – gets a number between 0 and 1 that will indicate a percentage of how much our video has been buffered
- getPlayerState – gets the state of our player (video):
- -1: unstarted
- 0: ended
- 1: playing
- 2: paused
- 3: buffering
- 5: video cued
- getCurrentTime – get current time
I would encourage you to read more about other functions because the YouTube API provides you with possibly everything you need from a video.
Events are another interesting part of the YouTube API. We can define functions that will be called once an event occurs in our video or player. Each event object has a
target that is a reference to our player.
- onReady – when player has finished loading and is ready for YouTube API calss
- onStateChange – when the state of our player changes
- onPlaybackQualityChange – when the quality of our player changes
- onPlaybackRateChange – when the rate changes
- onError – when an error occurs in our player
- onApiChange – when a module has been loaded in the player. At the time of writing only the captions module existed
You should the section onApiChange to learn more about the captions module. You should also look other sections, especially onError. We will define a function for that event and alert the visitor of any error.
Parameters are a big thing here. They allow us to control the display and functionality of our video. In our tutorial we will create a shortcode that can include all of those parameters. Since there are a lot of those, I will just show you some of them:
- fs – enable/disable the fullscreen option
- colors – control the color of our video (red or white loading bar)
- controls – display or hide the controls
- modestbranding – display or hide the YouTube logo
- showinfo – display or hide the information on the video (title)
Now that we learned a little about the YouTube API, we can start coding. The first thing you will have to do is create a new plugin folder
youtube-modal. In that folder create a new file with the same name
youtube-modal.php and add this:
Save that and go to your WordPress admin dashboard and under the Plugins menu, activate our plugin “WordPress Video Pop-up with YouTube API”.
We will start by creating our shortcode. We will accept any attribute we put in that shortcode and once it it loaded, we will add all those attribute as a HTML
Add this code to that file:
We check for the ID attribute first. If there is none, we will not display the button because we can’t have a YouTube video without an ID. After that we are creating the object string of every attribute that is set. We are then returning the button HTML with two attributes:
openVideoFromShortcodeevery time a user clicks on the button
data-vars– the data attribute that will hold every parameter we set inside the shortcode
We are registering our shortcode function with the
add_shortcode. First parameter is the shortcode name that we will use inside our content.
WordPress Video Modal
Now we will also add the modal. We will have an element that is empty and it will be replaced by the video iframe using the YouTube API.
By using the action hook
wp_footer, we will add this modal to the footer. We will hide that modal initially and by adding a class to the
html we will show this modal and create a video in it.
Style for the modal
We will now also add the style in the same way as the modal, but in the head of the page. Since this is a small style, we are making it inline instead of placing it in a separate css file. That way we will save on HTTP request.
For production, you could also minify that CSS.
modal-open that will be applied on the
html will be the indicator that the modal should show. By using the
::before, we are also adding a black background with some opacity under the modal. This will make the modal stand out.
Coding with the YouTube API
Since this is also a small script, we will place it at the bottom of our page. I also suggest minifying this script for production.
Add this as a base:
This is the same script that YouTube API documentation gives for getting started. This is will create a their script to load asynchronous. Once it is loaded, it will make the variable
true. We will use that as an indicator if we can start our video or not.
The Shortcode Function: openVideoFromShortcode
This is the function that will be called once your visitor clicks the button. We are first getting all the attributes from our button.
Two default variables
idValue will hold the ID for our YouTube video and also the player parameters. Since we don’t know at which place is our
data-vars, we must iterate through all the attributes and find it.
Once we find it, we are breaking out of the loop and we are also setting the value from that attribute in the variable
varsValue. By using the
The last step is to call the function
createPlayer that will create show the modal and create the video using YouTube API.
This function is used to create the player.
We are checking our indicator if the YouTube API has been loaded. Also, if the ID is not set, we will not create the video. If everything is fine, we are creating a new video using the YouTube API and setting the creating object to the global variable
Some functions are also applied to the
events. We are passing the ID to the
videoId and we are also passing all our parameters through variable
YouTube API will call this function when the player is ready to start the video. We will start the video and also add the class
modal-open to the
We are here looking at the state of our
player. If our video has stopped playing, we are calling the function
closeVideo. This function will remove the class
modal-open and also destroy our player.
In this function we are first destroying the video. This will remove the whole iframe object from our DOM. We are then getting the
html node and if there is a class
modal-open, we remove it.
This function will alert the user when there is an error with our video/player.
The YouTube API documentation has all the error codes explained.
Example of shortcode
[youtube_button id=V6O1eS0BQpo text="Video" fs="0" color=white modestbranding=1 showinfo=0]
This shortcode example will display a YouTube video with the ID
V6O1eS0BQpo. The text on the button will be
Video. We will also remove the full screen option, YouTube logo and the video information. I also chose the color
white as the video seeking bar.
YouTube API is a great way of displaying YouTube videos in your website because you get more control over it. Using the WordPress shortcode feature, we can place our button in various content and get a great YouTube Video.
Now you have a good base of displaying YouTube videos dynamically. If you want to display them in some other way, you can always create another function. You just need to call the function
createPlayer and pass the
id. Parameters do not need to be set, so they can always be empty.