List of topics covered in this documentation:
- Inserting a new Youtube video
- Connecting with the Google Developer Console
- Importing a whole playlist from YouTube
- Importing a live stream from YouTube
- Using Automatic Captions and Splash Images
Since it's launch in 2005, YouTube is the third most visited website on the internet and by far the most popular video hosting platform. With approximately 300 hours of video being uploaded every minute, YouTube has already changed a whole generation of people in the way of consuming video content, making the long-reigning monarch of entertainment - the television - obsolete and unnecessary.
Our free FV Player goes along very well with YouTube and posting videos directly from the site is very easy. If you want to have access to more advanced functions, like fully customizable skin with your own branding, integration of whole playlists and other, you'll want to go with our FV Player Pro. If you don't have a license yet, you can purchase one right now.
The player detects the device used and serves lower quality stream automatically when necessary. You can also create playlists from multiple YouTube videos with FV Player shortcode editor. Here's how to use it:
Inserting a new Youtube video
Simply open the shortcode editor and copy the link of a desired YouTube video and insert into Video box. You can also write the shortcode directly in this format:
[fvplayer src="https://youtu.be/7uY0Ab5HlZ0" splash="https://i.ytimg.com/vi/7uY0Ab5HlZ0/hqdefault.jpg" caption="Toronto Vacation Travel Guide | Expedia"]
And here is the video (Toronto Vacation Travel Guide by Expedia).
Note: FV Player Pro users can insert YouTube videos with a custom start time, which can be easily set right under the video itself. More info on how to do it can be found in this guide: How to Use Custom Start/End Time
Connecting with the Google Developer Console
If you are using FV Player Pro, then we recommend inserting a Google Developer Key into your account. There are two benefits:
- reliable import of splash screens from YouTube
- video duration parsing
- better parsing of playlists
If you are just adding a few individual YouTube videos, you do not need to do this. Just add manual splash screens (which are usually more relevant than automated splash screens) for those few YouTube videos you are showing.
1. To do this, go to Settings > FV Player Pro > Hosting > YouTube (Pro) and fill in your Google Developer Key. If you don't know where to get it, follow our simple guide below.
2. Click this Google Developers Console link. In next step click Create a project... in the top right menu.
3. You're starting a new project, so name it and optionally change the ID. Confirm by clicking Create.
4. Make sure YouTube Data API for the project is enabled. To enable the API, you have to choose the project and then switch to API manager on the left toolbar.
5. Now you can see the list of all the APIs you can get from Google. We will need the YouTube Data API.
6. You can now see the description of the API and you can activate it by clicking Enable.
7. You'll get a message like this one that says you need to create credentials first.
8. Just go to the left menu bar and select Credentials, then Create Credentials -> API key -> Browser key. You can change the name of the key and then hit Create. After that, you should see your new key.
Importing a whole playlist from YouTube
Do you have a whole playlist of videos on YouTube that you would like to share? You don't have to import them one by one, but you can copy the URL of the whole playlist and paste it into shortcode editor, as you would do when sharing a single video. It will look like this:
Second possible way is to open a single video from a playlist and then use the Share function of YouTube. Here you'll have the option to choose whether the playlist should start with the current video, or begin at the start. The box Share with playlist starting from should of course be ticked. Then just copy the generated link into FV Player.
Here's an example of how the imported playlist will look like (England by Expedia)
Importing a live stream from YouTube
FV Player is able to handle live streams in the same way as regular YouTube videos. All you need to do is copy the video URL and paste it to the shortcode editor. It looks like a regular link, as you can see:
[fvplayer src="https://www.youtube.com/watch?v=ddFvjfvPnqk" splash="https://i.ytimg.com/vi/ddFvjfvPnqk/hqdefault_live.jpg" caption="NASA Live - Earth From Space | Live From The International Space Station ISS"]
The player shows the live stream in a similar way to a regular video. Take a look at the example below (NASA Video : Earth From Space Real Footage - Video From The International Space Station ISS by Space Videos):
Using Automatic Captions and Splash Images
Same as for Vimeo videos, FV Player automatically parses the video caption from the title of the video on YouTube, if you don't set it manually. If you don't want the player to do this, you can turn it off in Settings > FV Player Pro > Hosting tab > YouTube (Pro) and check the box Disable video titles.
You can also change the automatically loaded splash image for any other you want. Just open the shortcode editor for the video you want to edit and upload or select an existing image. This will overwrite the automatic one.
Some notes at the end:
- If you own the FV Player Pro license and you are using the Beta mode, shortcode editor will show the automatically fetched splash image in the shortcode and will also add a caption generated from the title of the video. This is how the code will look like:
[fvplayer src="https://youtu.be/njCDZWTI-xg" splash="https://i.ytimg.com/vi/njCDZWTI-xg/hqdefault_live.jpg" caption="NASA Video : Earth From Space Real Footage - Video From The International Space Station ISS"]
- You can use subtitles with your YouTube video (you can check demos in here and see how to create subtitles in this guide)
- There might be some YouTube branding, but that's the requirement of YouTube API.