Embedding Youtube vids on my website - does it work?

heyvern · Post by **heyvern** » Thu Jan 01, 2009 4:54 am

I haven't worked on my web site in ages and it's been down a long time since it got hacked. Enough time to get over the pain.

This is a test of how I am going to embed Youtube videos on my new web site. I like using Youtube but wasn't happy with some of the limitations. This just uses hidden content with css and javascript. You can over ride many of the parameters of the default embed code, like listing "related" videos at the end and turning on autoplay. Everything you see is pulled from my videos on the youtube site, including the thumbnails.

Like I said just a test. I will be inserting this code into the final layout of the site. Let me know if it doesn't work right.

You should click on the thumbnails on the left which shows the video on the right that begins to play automatically. Clicking another thumbnail should hide the open one and show the new one. Clicking the same thumbnail again hides that video.

http://www.vernsworld.com/anime_studio/embed-movie.html

-vern

synthsin75 · Post by **synthsin75** » Thu Jan 01, 2009 5:58 am

Works just as you say in Firefox3. The only hitch in IE7 is when you click the thumb again to hide it or select another one the sound keeps playing.

Will this be the long promised tutorial site?

heyvern · Post by **heyvern** » Thu Jan 01, 2009 8:18 am

synthsin75 wrote: Will this be the long promised tutorial site?

Yes. I don't want to go to the hassle of hosting my own video content. You can have a small amount of space and have all your high bandwidth space hogging content on youtube. I will also be looking at other options for video like Vimeo (higher quality).

I have a pretty good used PC now and have downloaded Wink and Camstudio (the free version). I plan to try these out for doing tutorials. I still feel more comfortable doing "static" or "simpler" text and "screen grab" tutorials. They can be repurposed for print, web or pdf etc. They are also easier to do. See how it goes.

-vern

Genete · Post by **Genete** » Thu Jan 01, 2009 10:45 am

You should take in consideration the new 16:9 aspect ratio of youtube and its option to see the video in high quality. I don't know if that can be done but I guess it would.

Works here fine too. FF 3.0.5 Ubuntu Linux.

-G

gyula · Post by **gyula** » Thu Jan 01, 2009 12:10 pm

Works perfect under Mac OS (Safari/Opera)

spoooze! · Post by **spoooze!** » Thu Jan 01, 2009 4:40 pm

Works great for me (Firefox 3, Mac OSX 10.4.11).

jahnocli · Post by **jahnocli** » Thu Jan 01, 2009 4:43 pm

Works for me (Firefox 3, Vista Home).

kphgraphics · Post by **kphgraphics** » Thu Jan 01, 2009 5:43 pm

Works great for me too. Firefox 3 windows xp.

heyvern · Post by **heyvern** » Thu Jan 01, 2009 6:18 pm

Cool! Thanks for the feedback.

Genete,
these were some vids I had lying about for testing. The new "HD" display for youtube is great. As long as the video is in the right format when uploaded the high quality display is added in "automatically", their processor creates a high res "version".

Synth,
I can fix that IE issue by using the SWFObject for embedding the videos. This is cool. It gives you complete control over EVERYTHING when embedding the videos using JS, like playing, pausing, stopping etc. So you can "replace" the controls that Youtube normally puts in with your own. You can also "force" high quality playback.

-vern

heyvern · Post by **heyvern** » Thu Jan 01, 2009 7:04 pm

Woooohooooo!

Check out that link again. I updated it. It now uses the SWFObject code. It's so easy and way less coding. Total control. I can even eliminate the Youtube controls completely.

http://www.vernsworld.com/anime_studio/embed-movie.html

This is cool! If anyone does youtube stuff and embeds the links in their own web pages... AND isn't afraid of fooling with the code you need to check out the SWFObject stuff. It's fairly easy to do if you understand some basic HTML and javasscript. It only works "online" though. You can't do "local testing".

http://code.google.com/p/swfobject/

-vern

synthsin75 · Post by **synthsin75** » Thu Jan 01, 2009 7:12 pm

Looks good, but you may want to include the timeline control. Especially with animation, I often want to move through it slowly to catch some of the tricks used.

heyvern · Post by **heyvern** » Thu Jan 01, 2009 7:27 pm

Normally Youtube doesn't allow stepping through an animation frame by frame. I have to check to see if the SWFObject has an option for that. If you try to pause and step through a video on youtube you can't... at least I can't.

-vern

synthsin75 · Post by **synthsin75** » Thu Jan 01, 2009 7:32 pm

Yeah, can't do frame by frame on YouTube, but I can scan through slowly (depending on the video I think). Some sites like Vimeo or Viddler may have better control features.

Post by **Víctor Paredes** » Thu Jan 01, 2009 9:34 pm

oh, it's pretty interesting (and works fine for me too in firefox 3, winxp tablet edition). I want do it too!

heyvern · Post by **heyvern** » Thu Jan 01, 2009 10:11 pm

It's very easy to do. You will need to edit code by hand unless there is some kind of widget or add on for Dreamweaver or other html tool. You do have to upload some extra stuff to your server and link to it. Or there is a "hosted" version of the code you can link to if you don't want to host it on your own site.

It actually uses a totally different method for embedding the videos. It isn't actually embedding at all. It replaces the content of a <div> tag with the youtube video link. That empty video place holder is then loaded with a video through a simple JS function when you click a link.

In my first example I had all the youtube videos already in the page code in hidden div tags. Clicking the links would show or hide the content in the div's.

With SWFObject I only have one div tag that holds the video content. That div has an ID which is targeted by the links that loads the new content.

This is great. To add a new video link I just put in the link with the Youtube video "id" and it works. It's very efficient and looks nice too.

I have to agree with Synth though, I wish there was a way to "scrub" and pause video in Youtube. Apparently there is no way to do that using this type of "embedding". The video controls aren't "in" the web page so there is no way to use a "goto frame" command. I may be missing something though.

-vern