Menu
I know that the YouTube API does not provide functionality to display a playlist sidebar similar to the native YouTube playlist at this time.
Through searching I found a promising plugin to imitate this behavior. https://github.com/jakiestfu/Youtube-TV
Unfortunately, this plugin no longer works with YouTube's API v.3, however, Giorgio003 created a fork with API v.3 support. https://github.com/Giorgio003/Youtube-TV
I have followed all the installation instructions, but cannot seem to get it to work.
This is my page:
<!DOCTYPE html>
<html>
<head>
<link href="src/ytv.css" type="text/css" rel="stylesheet" />
<script src="src/ytv.js" type="text/javascript"></script>
</head>
<body>
<div>
Testing YouTube Playlist
</div>
<div id="YourPlayerID"></div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var controller = new YTV('YourPlayerID', {
channelId: 'UCBSvZIJlXJR7SE_KNvOiiGg'
});
});
</script>
</body>
</html>
In ytv.js I included my API key
(function(win, doc) {
'use strict';
var apiKey = 'ThisIsARealKeyForMyChannel';
var YTV = YTV || function(id, opts){...
The ytv.js script seems to be running fine. It correctly finds my channel and the two sample videos I have uploaded. The rendered HTML for #YourPlayerID looks like this:
<div id="YourPlayerID" class="ytv-canvas">
<div class="ytv-relative">
<div class="ytv-video">
<iframe id="ytv-video-playerYourPlayerID0" class="ytv-video-playerContainer" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/VqWWn-NrebU?enablejsapi=1&origin=http%3A%2F%2Fdevcf9.acm.org&controls=1&rel=0&showinfo=0&iv_load_policy=3&autoplay=0&theme=dark&wmode=opaque&widgetid=1"></iframe>
</div>
<div class="ytv-list">
<div class="ytv-list-header">
<a href="//youtube.com/channel/UCBSvZIJlXJR7SE_KNvOiiGg" target="_blank">
<img src="https://yt3.ggpht.com/-IGpxPi95eQQ/AAAAAAAAAAI/AAAAAAAAAAA/z-D0JYX_Wog/s88-c-k-no-mo-rj-c0xffffff/photo.jpg">
<span><i class="ytv-arrow down"></i>My Name</span>
</a>
</div>
<div class="ytv-list-inner">
<ul>
<li class="ytv-active">
<a href="#" data-ytv="VqWWn-NrebU" class="ytv-clear">
<div class="ytv-thumb">
<div class="ytv-thumb-stroke"></div>
<span>00:42</span>
<img src="https://i.ytimg.com/vi/VqWWn-NrebU/mqdefault.jpg">
</div>
<div class="ytv-content">
<b>Skin 4144</b>
<span class="ytv-views">1 Views</span>
</div>
</a>
</li>
<li>
<a href="#" data-ytv="bAWFo5ur9fc" class="ytv-clear">
<div class="ytv-thumb">
<div class="ytv-thumb-stroke"></div>
<span>00:16</span>
<img src="https://i.ytimg.com/vi/bAWFo5ur9fc/mqdefault.jpg">
</div>
<div class="ytv-content"><b>Nebula 6044</b>
<span class="ytv-views">0 Views</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
But no video or playlist appears on the page. Can anyone see what I am missing?
239
Embed a video or playlistOn a computer, go to the YouTube video or playlist you want to embed. From the list of Share options, click Embed. From the box that appears, copy the HTML code. Paste the code into your website HTML.
First, click on the Embed button in the top right corner. From this popup, you can click on Add to a Page to embed this YouTube playlist feed on the WordPress page of your website. Next, you'll see a list of all the pages on your website. Select your page here and then click on the Add button below.
To start, simply create a new page or edit an existing one. Once you're in the WordPress content editor, simply click the '+' button and add the 'Feeds for YouTube' block. Your YouTube playlist will now appear on your page. Go ahead and publish your article to see the YouTube playlist feed in action.
YouTube allows you to embed videos. You can add it to a specific page, making it easy to watch right away without ever leaving your website. Think of it as installing a flatscreen television on the walls of your website and being able to show your visitors what you want, when you want.
I was able to solve the problem. All the elements created from the plugin set the height to 100%. The element <div id="YourPlayerID"></div> had a height of 0, therefore, all its children had a height of 0. Once I gave the #YourPlayerID element a height the playlist appeared.
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
