The <amp-youtube> extension supports embedding an individual YouTube video but how do you embed a YouTube playlist on an AMP page?
Hey just checked it and it works perfectly
this is an Example code playing a video playlist
<amp-iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLjwWT1Xy3c4UtTRb5Kysk5NHmggxJc1vw" frameborder="0" allowfullscreen="" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 560px) 560px, 100vw" class="amp-wp-enforced-sizes"><div placeholder="" class="amp-wp-iframe-placeholder"></div></amp-iframe>
I tested playing playlist with amp-youtube and it does not work because amp-youtube requires an attribute data-videoid this does not work with playlist ID's
You can use amp-youtube for playlist like this
<amp-youtube
width="480"
height="270"
layout="responsive"
data-videoid="FIRST VIDEO ID IS HERE"
data-param-listType="playlist"
data-param-list="PLAYLIST ID IS HERE"></amp-youtube>
Well, you cannot use the <amp-youtube> to embed a YouTube Playlist. The <amp-youtube> is only used to embed a single/individual video.
A playlist in YouTube has this following form.
https://www.youtube.com/embed/videoseries?list=PLlVlyGVtvuVll4Te_6kO4CsI7dcPJKQLt
So instead of <amp-youtube>, try to use the <amp-iframe> with it and check if it works.
Related
For the last year I have been using a PHP script to build a playlist from a small collection of videos.
It would build a custom playlist of the selected videos and render a set of playlist controls from the API. As of this time yesterday it was working, now it is not.
Here's the snippet that is broken:
$result = "<iframe width=\"720\" height=\"405\" src=\"https://www.youtube.com/embed/?playlist=";
$last = count($playlist) -1;
for ($k=0; $k < count($playlist); $k++){
if ($k < $last){
$result = $result . $playlist[$k]['videoid'] . ",";
} else {
$result = $result . $playlist[$k]['videoid'] . "&controls=1\" frameborder=\"0\" allowfullscreen></iframe>";
}
I get the following error instead of an imbed with a list of playback selections:
An error occurred. Please try again later. (Playback ID: jBLBkfJOl8-X0sct)
Has something changed in the API on Aug 31, 2020?
I am not finding any documentation or information that is specifically about building custom playlists in the API. I don't want to search existing playlists, I want to build a playlist based on video links that are cultivated for viewing.
I adapted my solution from this stackoverflow answer
I put a bounty on this question because the same issue happened to me and I was busy with other things and didn't have time to try and debug this issue on the personal project that was utilising this.
Still not entirely sure what caused this to suddenly break as I still haven't seen any notifications that youtube changed their api, but that isn't unusual when working with google product apis.
The short answer to this problem is that you now need to include an initial video id to embed before the playlist querystring.
So the embed code now needs to look like:
<iframe id="ytplayer" type="text/html" width="720" height="405"
src="https://www.youtube.com/embed/Yc4VO8yzYcU?playlist=Y8R4Wvw7wlg,hz2HIKsQfIw,0UbCOpRye5c&playsinline=1"
frameborder="0" allowfullscreen>
FYI: Google seems to have updated how to display a channel playlist showing whatever the most recent video is: https://support.google.com/youtube/answer/171780?hl=en
A sample embed code now needs "videoseries" included after "embed/" and before "?list":
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
In the context of EXT:blog (which may or may not be relevant) on TYPO3 8.7 I added a YouTube video under Resources > Files > Media > Add media by URL. This results in a reference to a .youtube file.
Within List\Post.html, a Fluid template which overrides EXT:blog's Post.html, I get access to the post.media array. post.media contains a FileReference. When rendering that using <f:image src="thatreference.uid" treatIdAsReference="1" .../> I do get the video's thumbnail.
How do I determine whether a post.media entry refers to a YouTube video and how do I render that video instead of the thumbnail image? I could not find any useful properties on that FileReference (such as media type or YouTube video ID) yet. Do I need to go another route?
Just use <f:media /> which outputs all media types including youtube videos
You can do like this. For more details f:media.
You can get your file path like this {thatreference.originalResource.publicUrl}
<f:media file="{your file path}" width="400" height="375" additionalConfig="{loop: '1', autoplay: '1'}" />
Media, including images and videos, can be output using the f:media ViewHelper:
<f:media file="{thatreference}" width="400" height="375"/>
To determine the resources media type use {thatreference.originalResource.originalFile.type}. A value of 4 stands for video, 2 stands for images:
<f:if condition="{thatreference.originalResource.originalFile.type} == 4">…</f:if>
The original YouTube URL can be read from {thatreference.originalResource.publicUrl} and various other properties such as preview dimensions (useful for calculating aspect ratio) from {thatreference.originalResource.properties}.
I have just been looking into allowing my users to upload videos to their YouTube accounts directly from my site using the Youtube Upload widget. This widget is like 1000 times easier to deploy that the usual API process.
I have seen that it currently defaults to webcam_only=true but am wondering why? If I change the iframe to webcam_only=false I get the upload button and it all seems to work fine...
Obviously it would be an enourmous time saver for me if I could just use this functionality as opposed to trying to get my head around the whole API 2 way of doing things- plus that method seems to require refreshing the page which is no good for my app.
Any updates on why this is disabled and when it may be enabled?
Thanks in advance
webcam_only is set to true by default if the api creates the api. You can create the iframe element yourself as detailed in the "Loading an upload widget" of the developer docs.
https://developers.google.com/youtube/youtube_upload_widget
<iframe id="widget" type="text/html" width="640" height="390"
src="https://www.youtube.com/upload_embed" frameborder="0"></iframe>
<script>
widget = new YT.UploadWidget('widget', {
});
</script>
Or
<div id="widget"></div>
widget = new YT.UploadWidget('widget', {
webcamOnly: true;
});
I believe the option to upload videos using the YouTube Upload Direct widget has been removed as of August 2012. Although you can force add the upload button you get the button, but nothing happens with it.
https://developers.google.com/youtube/youtube_upload_widget#Revision_History
August 22, 2012 This update contains the following changes:
The webcamOnly property has been removed from the list of widget options that you can specify in the constructor for the upload widget.
Previously, this property was documented as having a default value of
false, which would mean that the widget would also display a button
for uploading an existing video file. However, the option to upload an
existing file is not currently supported, so the widget always only
displays an option to record and upload a webcam video.
Here is an example of the button with no action: http://sandboxsite.us/youtubetest.php
This is using:
<iframe id="widget" type="text/html" width="640" height="390"
src="https://www.youtube.com/upload_embed?webcam_only=false" frameborder="0"></iframe>
<script>
widget = new YT.UploadWidget('widget', {
});
</script>
If anyone figures out how to add the button AND make the uploads work, I'd surely buy them a beer!
I am trying to embed a Youtube video on my site with specific start and end times. Sites such as snipsnip.it and splicd.com use the start= and end= tags in the iframe src like so:
<iframe src='http://www.youtube.com/embed/OwjfE2ylbWU?start=5&end=10' width='640' height='360'>
</iframe>
However, this does not work on my web page. The video starts at the right time but then just plays till the end of the video. The Youtube API states that there is no "end=" tag, yet these sites all use it successfully.
Any idea on how to get embedded Youtube videos to end at a specific point?
splicd.com doesn't actually depend on the YouTube to stop the video. They poll the player with the following JavaScript and the YouTube Player API:
function checkYouTubePlayHead()
{
current = player.getCurrentTime();
if((current >= end) && splice) {
player.seekTo(start, true);=
player.pauseVideo();
}
if(current > start)
played = true;
}
It was working before without any js to implement, youtube just changed to googleapis video repository 2 days ago, and that messed up the end tag. It'll be fixed soon hopefully, not you're the only one, who need a solution for this. So far, this worked fine:
http://www.youtube.com/v/81hChAAt3So&start=107&end=115s&autoplay=0&autohide=0&theme=dark&color=white&rel=0&modestbranding=1&showinfo=0
Now most of the parameters are not passed. Be patient :)
I'm working with Ruby On Rails 2.3.8 and I'm using TinyMCE with image and video upload functionalities.
I've figured out that when I insert a Vimeo video, it won't work, because it needs it's own iframe, as the following:
<iframe src="http://player.vimeo.com/video/16430948" width="400" height="225" frameborder="0"></iframe><p>YOU! - Heart from KUSKUS on Vimeo.</p>
I'm now wondering how to show either youtube (which work just fine), vimeo, and other kind of embedded videos.
Update:
Searching on the internet I've found the following code, in the file /plugins/media/media.js, within getType function:
// Vimeo
if ( v.match(/^http:\/\/(?:www\.){0,1}vimeo\.com\/(\d+)$/) ) {
f.width.value = '400';
f.height.value = '321';
f.src.value = 'http://vimeo.com/moogaloop.swf?clip_id=' + v.match(/^http:\/\/(?:www\.){0,1}vimeo\.com\/(\d+)$/)[1];
return 'flash';
}
But it's not working for me. At least, all I see is that it's treating it as it was a common flash video, instead of inserting an iframe on the html for playing it (as it's done when you click the "Embed" button at vimeo.com).
The iframe tag usually gets removed (cleanup) if you do not specify otherwise.
Add this to your tinymce configuration to keep iframes inside the editor:
extended_valid_elements:"iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]",
This thread might be of help too.