I work on a site, I want to embed all the Youtube-channel-videos into my site.
I found similar post like this code that acutally worked fine and loaded all videos as desired for some time, but yesterday I saw that the channel-video-list didnt load, displaying only one video. What have happend? Has Youtube made any updates lately so the channel-videos wont load?
<iframe src="http://www.youtube.com/embed/?listType=user_uploads&list=FeetMinistries" width="100%" height="800"></iframe>
Thanks for all the help I can get.
André
you could try
Embed a video
On a computer, go to the YouTube video you want to embed.
Under the video, click SHARE Share.
Click Embed.
From the box that appears, copy the HTML code.
Paste the code into your blog or website HTML.
Embed a playlist
Sign in to your YouTube account on a computer.
On the left side of the page, select the playlist you want to embed.
Copy the playlist ID from the URL.
Modify the embed code for an individual video by doing the following:
In the place of the video ID (after "embed/"), substitute
"videoseries?list=".
Then paste the playlist ID after the "=".
Paste the code into your blog or website HTML.
https://support.google.com/youtube/answer/171780?hl=en
Consider following JQuery code snippet I'm usually using to dynamically load channel by channel Id.
$.ajax({
url: "https://www.googleapis.com/youtube/v3/playlists",
type: 'get',
dataType: 'json',
data: {
part : 'snippet',
channelId: <channel_id>,
maxResults : 50,
key: '<API Key>',
},
success: function(data) {
}
});
Related
I've been trying to get the view count on videos that I query through the following method:
function search() {
var request = gapi.client.youtube.search.list({
part: 'snippet',
channelId: 'IRRELEVANT',
order: 'date',
maxResults: '25'
});
request.execute(function(response){
YoutubeResponse(response);
});
While the documentation tells me that there's a statistics portion to every video, after the snippet I have __proto__ which I guess means there was an error somewhere? or did the API change? Essentially I need the view count of those 25 most recent videos...
I tried changing part: 'snippet' to part: 'statistics' but got back a code: -32602...
Thanks for the help,
Cheers!
EDIT: Apparently the search.list doesn't have the "statistics" but rather I need to search every video individually... The thing is, when using googles "Try It" feature (https://developers.google.com/youtube/v3/docs/videos/list#try-it) when you ask for the statistics in the "Fields" part at the bottom, it doesn't do anything... So I am VERY confused as to how the heck can I get the view counts & length of all 25 videos (if individually or all at once - preferably-)
The link you gave https://developers.google.com/youtube/v3/docs/videos/list#try-it is working for me.
To get duration and viewCount: Fill in for part: contentDetails,statistics and for id: a comma-separated-list of video-id's like: TruIq5IxuiU,-VoFbH8jTzE,RPNDXrAvAMg,gmQmYc9-zcg
This will create a request as:
GET https://www.googleapis.com/youtube/v3/videos?part=contentDetails,statistics&id=TruIq5IxuiU,-VoFbH8jTzE,RPNDXrAvAMg,gmQmYc9-zcg&key={YOUR_API_KEY}
Agree with the answer provided by #Als.
But I found a code snippet which might be more convenient for some of you:
function youtube_view_count_shortcode($params)
{
$videoID = $params['id']; // view id here
$json = file_get_contents("https://www.googleapis.com/youtube/v3/videos?
part=statistics&id=" . $videoID . "&key=xxxxxxxxxxxxxxxxxxxxxxxx");
$jsonData = json_decode($json);
$views = $jsonData->items[0]->statistics->viewCount;
return number_format($views);
}
Replace the key value with the google api key for youtube data API and the video id with the youtube video id and Voila you get the total number of views for the youtube video.
Source: https://www.codementor.io/rajharajesuwari/how-to-get-youtube-views-count-aftojpxhj
Does anyone know why the picture attribute is not working in following Facebook UI call?
function postToWallUsingFBUi()
{
var data=
{
method: 'stream.publish',
message: "Posted using FB.ui and picture.",
display: 'iframe',
caption: "Caption",
name: "Name",
//ver 1 picture: 'http://www.somedomain.com/albums/s339/rockaja/fb-520.png',
//ver 2 picture: '#Url.Action("Action", "Controller", new { PageId = Model.PageTabId }, Request.Url.Scheme)',
picture: 'https://localhost/MyVirtualDirectory/Controller/Action/283659015078395',
link: "http://www.mydomain.com/", // Go here if user click the picture
description: "Description field",
actions: [{ name: 'action_links text!', link: 'http://www.mydomain.com' }]
}
FB.ui(data, onPostToWallCompleted);
}
As you can see the picture attribute uses a picture from localhost. If i paste this URL into the browsers's Address field, i get the picture as expected.
I also commented out other two versions:
version 1 is working properly as expected, but
version 2 is not working (this is an ASP.NET MVC call, but that fact does not affect the result).
May be it is due to the fact that i request a localhost-ed picture?!
I have never worked on FB API so take my suggestion with a pinch of salt.
Based on my understanding of how Facebook works, whatever pictures you share on user's wall go into FB's data store first and are always pulled from that store.
Here, The Facebook API may be downloading the picture from the URL you have provided and push it into it's own store before publishing it on user's walls. When you use a localhost url, then the call to download the picture would obviously fail.
There must be another version of the API where you should be able to send the picture content as byte array. If there is, then you can load the picture from disk yourself and send the byte array in the API
I would like to embed an external website in my app, so I tried it with the tag here:
<iframe src="http://www.uniteich.at" frameborder="0" width="420" height="315"></iframe>
But I get the following error: "Unsafe JavaScript attempt to access frame with URL content://io.trigger.forge2dd999d0f14b11e1bc8612313d1adcbe/src/index.html from frame with URL http://www.uniteich.at/. Domains, protocols and ports must match."
So is there a good solution to embed a website in ios/android app with trigger.io?
Thanks in advance,
enne
EDIT: Ok, to make it more clear what I want: I would just like to load an external website as soon as a user clicks on a specific tabbar button at the bottom. I made this event-handler:
var dessertButton = forge.tabbar.addButton({
text: "Uniteich",
icon: "img/strawberry.png",
index: 2
}, function (button) {
button.onPressed.addListener(function () {
//LOAD EXTERNAL WEBSITE IN CONTENT CONTAINER HERE
});
});
Is that possible somehow?
This issue is cross domain requests. For more information read the same origin policy.
To get around this you will need to utilize forge.request. After adding www.uniteich.at to your config permissions first try the simple forge.get like this:
button.onPressed.addListener(function () {
var mainElement = document.getElementById("main");
forge.request.get("http://www.uniteich.at/index.html", function(content) {
mainElement.innerHTML = content;
},
function(error) {
mainElement.innerHTML = "<b>Error</b>" + error.message;
});
});
And if that does not work or not enough (I am not at my dev computer right now) you can utilize more options with forge.request.ajax.
I was wondering if it's possible to embed youtube videos' comments and like button with the video?
If there is such thing, how can I do that or where can I get more info? Thanks
Here you can see an example of how to get and display the video comments
Getting Youtube Video Information using javascript/jquery
and in the Topic Explorer project you can see how to add a 'like' or add the video to your favorites:
https://code.google.com/p/yt-topic-explorer/source/browse/app/views/main.html
<button ng-click="addToList($event.target, 'likes', videoResult.id)">{{'LIKE'|i18n}}</button>
<button ng-click="addToList($event.target, 'favorites', videoResult.id)">{{'FAVORITE'|i18n}}</button>
and in:
https://code.google.com/p/yt-topic-explorer/source/browse/app/scripts/controllers/main.js
$scope.addToList = function(target, listName, videoId) {
var listId = $rootScope.relatedPlaylists[listName];
target.textContent = topicExplorerApp.filter.i18n('ADDING');
target.disabled = true;
youtube({
method: 'POST',
service: 'playlistItems',
params: {
part: 'snippet'
},
body: {
snippet: {
playlistId: listId,
resourceId: {
kind: constants.VIDEO_KIND,
videoId: videoId
}
}
},
callback: function(results) {
if ('error' in results) {
target.textContent = 'Error';
} else {
target.textContent = topicExplorerApp.filter.i18n('ADDED');
}
}
});
};
YouTube does not have any embed code that you can use to embed comments. So basically there are 2 options to embed comments -
1. Use the YouTube API to embed and post comments. This will need a good coding knowledge.
To get comments use this endpoint
GET https://www.googleapis.com/youtube/v3/commentThreads
To add comments use this endpoint
POST https://www.googleapis.com/youtube/v3/playlistItems
2. Or you can use a ready-made plugin that allows this functionality. Here is a small demo of the Youmax plugin that will list comments as well as allow you to add comments.
EDITED: On Feb,2016 YT has stopped the solution bellow from working :-( I'll keep it here just for reference
FOR THE COMMENTS:
As YT has deprecated the gdata for the comments url, you can scrape 'em also from here; its a workaround though :D
https://www.youtube.com/all_comments?v=cOIKAnF3mjs
...no authentication needed! :) and if you want to work the client side only (in this example by cross-domain), go through JS
<textarea style="width:100%;height:100%" id=cu></textarea>
<script>
var r='';
function c(d)
{
for(i=0;i<=d.query.count-1;i++)
r=r+d.results[i];
document.getElementById('cu').innerHTML=r;
}
</script>
<script src="http://query.yahooapis.com/v1/public/yql?q=%20SELECT%20*%20FROM%20html%20WHERE%20url%3D%22https://www.youtube.com/all_comments?v=cOIKAnF3mjs%22&callback=c"></script>
You can Access YouTube Comments by processing this URL
http://gdata.youtube.com/feeds/api/videos/{$videoID}/comments
The YouTube like functionality requires the user to be logged-in to his/hers Google account
My main page is here:
http://www.mydomain.com/main/main.php
My login page is here:
http://www.mydomain.com/main/pages/login.php
Main.php uses ajax to fetch data in response to a tap event. This works fine until I navigate to my login page and then back to my main page. After going to the login page and back, the relative paths get messed up such that the ajax looks for server file in the wrong place.
here is the ajax:
1. function get_more_data() {
2. more_data_index += 15;
3. var formData = "index=" + more_data_index;
4. $.ajax({
5. type: "POST",
6. url: "genxml.php", // file located here: http://www.mydomain.com/main/genxml.php
7. cache: false,
8. data: formData,
9. dataType: "xml",
10. success: showFiles3,
11. error: onErrorMoreData
12. });
13. }
After I navigate back to main.php from login.php the ajax tries posting to the wrong location:
http://www.mydomain.com/main/pages/genxml.php
(genxml.php is not in the "pages" subdirectory; it's in the main directory.)
I tried updating the ajax to use an absolute path:
url: "http://www.mydomain.com/main/genxml.php"
This made the post successful, but my data parsing failed because relatives paths are used in the main file for things like images. So instead of getting images from here: http://www.mydomain.com/main/ the script was trying to get images from here: http://www.mydomain.com/main/pages/
I've found a few posts with people having similar issues, but I've not come across a solution. I've also tried reading the jquerymobile docs and it's very possible that the jquery developers attempt to cover this issue here, but I admit I don't completely understand everything on this page:
http://jquerymobile.com/demos/1.0b3/#/demos/1.0b3/docs/pages/page-navmodel.html
If anyone can help I would really appreciate it. Thanks.
P.S. This issue happens on Android and Google Chrome, but not in Firefox.
I have created a working example of what you're trying to do. You should be able to look at this and see what I've done. Be sure to checkout the master.js. I think that the key to making it work in your situation is to nest the ajax calls within the "pageshow" event to be sure that your baseURL has been updated. You can download the example at http://www.roughlybrilliant.com/stackoverflow/7372909.7z
View the example in action as it pulls in weather.xml with relative URLs.
$("div").live("pageshow", function(){
var $page = $(this);
get_more_data();
});
Why don't you use one of this:
use "../main.php" when redirecting back from login page, or
remember UrlRefer from Headers when you entering login.php and use that to redirect back to any previous page with 301