I'm trying to embed a youtube playlist with a sidebar to my html page.
The playlist itself can be embedded by this html code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLMC9KNkIncKtPzgY-5rmhvj7fax8fdxoj" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="1"/>
This displays the playlist, but without a sidebar. So I now want to add a sidebar next to the youtube playlist display.
So the final view should be something like this:
The sidebar items should be the thumbnail images of the next videos. You should be able to scroll/navigate to the next/previous videos in the playlist that aren't displayed. And when you click on the sidebar items the displayed video should be updated to the clicked video and the sidebar should updated to the next available videos.
On youtube playlist sidebars are displayed like this:
So we would like an alteration of that sidebar with only the image thumbnails. So a 'cleaner' look of the youtube sidebar.
Note: The solution should only use html/css/javascript.
These 2 questions have asked the same, but these are from to long ago and both the iframe and plugin solution don't seem work anymore.:
Embed YouTube Playlist plugin with sidebar list visible
Embed youtube playlist with side list tray
Edit:
The example in the answer seems to be outdated, here a functional version. (Full credits to #Skyrocker of course)
TL;DR: you'll have to use official Google Youtube API
Unfortunately it's impossible to use the same "easy" approach, like the one that you use with a iframe embedded Youtube. To be able to customize the look of the playlist you need to do a few preparation steps:
Create a google developer account to receive the needful API.
Create a project
On the credentials page - on the tab OAuth consent screen fill the required fields and add your site domain into Authorized domains section (For testing purposes add a https://cdpn.io, but don't forget to replace it with your actual site domain later)
Go again to the credentials page - create an API key, restrict it to use only the Youtube Data API (at the very bottom of the list)
Go again to the credentials page - create an OAuth ClientId. For testing purposes add a https://cdpn.io domain to the Authorized JavaScript origins, but don't forget to replace it with your actual site domain later
Enable the API Services for Youtube
Then, after doing all from this list, see the codepen example how to orchestrate this. A few requirements:
Fill API keys variables
The implementation, that built on the Google API, will require the confirmation from user to access the services. This is up to you to think of the flow when to initialize this confirmation pop.
Updates:
Indeed, you were right, those methods can be invoked without auth.
Here is your upgraded version of the list
You could YouTube Data API to embed a YouTube playlist with a sidebar but for that you have to do a lot of stuff. You would have to create a Google Developer account so that you get access to that API. Then you could create your project and create API and modify it according to your needs. And after you have made all the changes enable the API Services for YouTube and you are good to go.
Implement divs of main page and sidebar, the way you embed video anywhere in the page, add it to the sidebar div, no trouble.
Related
I am trying to allow users to embed our custom HTML5 video player in their facebook feed. I have tried using open graph tags and it just creates an external link to navigate to our site. I know that it is possible to do this with a flash player, but I need to be able to do this with HTML5.
I see that Vimeo and YouTube have been able to embed their HTML5 players on a users facebook wall when they share a video. I am trying to do the same and would appreciate advice on this.
Thanks
I've just loaded video.js plugin on my wordpress site.
I would like to find out if it is possible to disable the links 'get video url' etc. I want to add videos from youtube but don't want users linking to the unlisted videos. The videos are for a course and I don't want them shared. only users on the course get access to the videos.
But, the YOUTUBE logo still needs to be active due to their terms and conditions.
Many thanks
My use case is kinda basic. According to the URL a user inputs, I want to have the good player displayed, that varies according to the input of course.
For instance, inputting http://www.youtube.com/watch?v=rv5OwTiBEiQ would display the preview of the Youtube player. The same goes with Dailymotion, Yahoo!, Vimeo, Justin.tv, Myspace...
Do you know is any Javascript plugin does this ? Ideally, it'd be based on Prototype.
In the Youtube case, all you have to do is get the video id of the url and put this in the follow URL:
http://img.youtube.com/vi/{video-id}/1.jpg
Then you have the link to the youtube preview image!
Coding in ASP.NET/C#/jQuery/Javascript
Third Party Editor used: Innova Studio WSIWYG Editor
I am embedding youtube videos in the WSIWYG editor with the help of YouTube Embedded Player Parameters
My question is, what are the embedding parameters for playlists?
Are they both similar?
Are there some reference sites we could look at?
Anees here.
Excerpt from YouTube:
How do I add a playlist to my blog or web page?
To create a playlist, go to the My Playlists page, click 'Create a Playlist' and fill out the information.
As you find videos you like on YouTube, click 'Add to Playlist' under the player to add them to your list. You can change the order of the videos in your playlist by returning to the 'My Playlist' page.
The easiest way to embed a playlist is to create a custom player. Go to your YouTube account and click "Custom Video Players", then "Create Custom Player". Select a colour and format for your player, and then choose what is going to play in it—you can choose a playlist, your own uploaded content or your favourites—and then click the "Generate Code" button.
Copy and paste the code into your blog entry or web page, just as you did with the embedded video above.
http://www.youtube.com/youtubeonyoursite
I've looked through the YouTube JS API, but can't find a way to jump to a video in a playlist. (Mimicking the built-in navigation)
And if you're wondering why I'd want both, it's because I have a menu set up with additional information, and want to let the user click these links to jump between the videos.
You can write your own YouTube player script or use this one -- YouTube JavaScript API Player plus Playlist.