How do I embed a youtube channel? - youtube

How do I embed a youtube channel that will show the latest video from that user?
Say for instance, the latest video on this page: http://www.youtube.com/citizentube
Please don't tell me to go to http://www.youtube.com/custom_player because that page is dead. And please don't reference http://code.google.com/apis/youtube/overview.html unless you have a specific example. I've looked, haven't found anything.
This is crazy frustrating. Apparently there was embed code right on the channel/user page back in 2010. But it is nowhere to be found now.
Thanks,
Peter

I made a script that find the latest videos from any youtube user of your choice. It contains of both html, php and javascript code. What it basically does is it read the rss feed ( http://www.youtube.com/rss/user/citizentube/videos.rss ) from that user and build a list you can click and watch the videos from. The very last video will load as default. You can try it by adding these few lines of javascript into your website:
<script language="javascript" type="text/javascript" src="http://lablogic.net/scripts/infotube/webtube.js"></script>
<script language="javascript" type="text/javascript"> init(470,65,"citizentube",300,220); </script>
or you can go to: youtube webviewer and customize your own. Just type your channelName behind "channel" and hit "Try it". My php script will then generate the short javascript you need. You can also move the channelviewer with your mouse.

The following page documents a 3 step procedure to do this, using Yahoo Pipes:
http://x10hosting.com/forums/tutorials/161362-how-automatically-embed-latest-video-youtube-channel-your-site.html

Related

Anyone else have problems with Swiftype embed code causing wierd behavior with Youtube Iframe API?

I have been having problems with my youtube iframe YT.player triggering the onReady callback twice. It took me about a week to find the source of the problem. All I know is there is some sort of bug when I use Swiftype embed code with the youtube iframe api. Has anyone out there run into this problem?
As soon as I remove my swiftype embed code the onReady only fires once like it is supposed to.
This is what I mean by Swiftype Embed Code
<script type="text/javascript">
(function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
(w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
e=d.getElementsByTagName(t) [0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
})(window,document,'script','//s.swiftypecdn.com/install/v1/st.js','_st');
_st('install','YOUR_INSTALL_KEY');
</script>

Playing Youtubes with HTML 5 on iOS

I am trying load a YouTube video into a HTML 5 tag.
The problem I am having is I do not know what the “src” property should be. Using the URL for a video on YouTube does not seem to work, that URL seems to retrieve an entire page rather than just a video file.
I have been able to copy and paste YouTube’s own tag (by viewing the page source), that they use on their pages, but this is not a very efficient or long term solution. Is there a better solution?
I have tried to use YouTube’s API, but no matter what I do, it seems always to pull in the flash player version of the player (which of course won’t work for iOS.) Am I missing something obvious here?
This blog post might help: http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html
The suggestion is to use this code:
<iframe class="youtube-player" type="text/html" width="640" height="385"
src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>
The iframe will autodetect HTML5 capabilities and use them; if not, it uses Flash as fallback.

Firebug lite on iPad

Already found this page with some helpful hints.
Problem is I need to debug a web application on a CMS using an iPad and Safari.
So far I haven't been able to make firebug-lite work. I am working in a secured environment having no internet acces, but can copy files using a USB-key.
I have copied firebug-lite.js to the local server and included the file in a script tag in the head:
<script type="text/javascript" src="http://my_server/js/firebug-lite.js"></script>
Unfortunatly when I open the page in the CMS I cannot see the firebug-lite-button on the page. Verifying the source code firebug-lite should have been loaded on the page. There is no way to get a right click menu to inspect anything.
What can I do to make firebug-lite work on the iPad? What am I doing wrong?
Start Firebug Lite already opened, as per http://getfirebug.com/firebuglite#Options :
<script type="text/javascript" src="proto://path/to/firebug-lite.js#startOpened=true"></script>
I think you won't be able to inspect elements, but you can navigate to the elements in the DOM tree provided by Firebug Lite.
It looks like Firebug-lite has problems with the iPad browser since late 2010.
The problem (ticket on official tracker) has not been yet solved.
Have you tested the problematic page in Safari/Chrome/Chromium for desktop? Since they use Webkit, the same system used with mobile Safari/Chrome, you may be able to duplicate the error and find its solution. You can open Chrome's debugger with right click, Inspect element.

Embedded video not rendering in Chrome on first load after embed code is saved to a Rails model

We have an Ruby on Rail app that allows the user to save a number of video embed codes into a into our data model. The form allows the user to enter any number of embed codes, press submit and save everything to the database. The app then redirects the user to a page that has a list of all the embed codes.
This workflow works fine for IE, Safari, and Firefox.
On Chrome, however, the first time the page is loaded none of the videos appear on the page. I see the following error in the console, once for each video:
Refused to execute a JavaScript script. Source code of script found within request.
On subsequent page loads, the videos load fine and that error is not displayed.
When I view source, the page is reloaded for the view-source operation so I cannot tell if the source is coming through as expected.
When I inspect element on the block where the video should be, I see the following:
<iframe src="" width="400" height="225" frameborder="0">
<html>
<head></head>
<body></body>
</html>
</iframe>
This occurs for both the iframe style embed codes as well as for the "old-style" tag code for both YoutTube and Vimeo videos.
Related:
Refused to execute a JavaScript script. Source code of script found within request
It's how Chrome prevents XSS (cross-site scripting), as your reference above.
When you submit your embed codes, and redirect to another page to display them, Chrome sees that the submitted embed codes (via HTTP POST))and the responded embed codes are the same, so it prevents to load them and displays error in the console.
When you refresh the page, no more HTTP POST submitted (because you redirected it before), so it should display correctly.
I have same problem, and I resolved it by auto reloading the page after it redirected.
I reload the iframes via javascript (with jquery) as workarround..
I therefore store the src elsewhere cause chrome removes it..
I added the url twice as src and src2, and reloaded then with src2.
I also gave all the iframes that need reloading a special class 'webkitIframeHack'.
<script type="text/javascript">
$(function(){
if ($.browser.webkit) {
$("iframe.webkitIframeHack").each(function(){
$(this).attr('src', $(this).attr('src2'));
});
};
});
</script>
(I can't use html5 data-* attributes, i think they would be more fitted..)

How do I go about embedding a youtube chromeless player without adding controls?

I am creating an online experiment. It involves participants watching a video then answering a questionnaire. I would like to embed a chromeless youtube video which plays automatically on page load, does not have controls for participants to play around with, and loads the next page once the video finishes.
Now the autoplay/forward to next page functions are secondary and I'm not too concerned if I can't get them working. However I am very interested in how to embed a chromeless player. I have gone to the google playground but this code already has the controls attached. I am not very experienced at coding so I do not know what to remove from the code for none of the custom controls on the left to be displayed. Is anyone able to help me?
Thanks, Wil
When you embed the video, you can use the parameter controls=0 which will remove the buttons and make it appear chromeless.
ie the code in your embed section would include http://www.youtube.com/embed/NxLBVAq-4dg?rel=0&controls=0"
You may want to look at http://code.google.com/apis/youtube/youtube_player_demo.html it allows you configure your player so that you can embed it chrome-less on your pages.
It should be a simple copy and paste.
Yes, surprisingly, I did'nt find any Youtube page with sample code for their chromeless plugin.
But there is a lot of of jquery plugin which use the chromeless plugin. You'l find a good tutorial here :
http://tutorialzine.com/2010/07/youtube-api-custom-player-jquery-css/
You can use SWF objects to embed your chromeless player.
You must add this js library in your html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
then in your main js file you call the embedSWF method:
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/FeJkDewhTEw?enablejsapi=1&playerapiid=ytplayer&version=3&controls=0&showinfo=0",
"ytapiplayer", "425", "356", "8", null, null, params, atts);
If you don't want any controls or info, just set controls=0 and showinfo=0 in the url
See: https://developers.google.com/youtube/js_api_reference#GettingStarted
JW player http://www.longtailvideo.com/players will play youtube videos without the youtube branding, I think.

Resources