embedded youtube behaving badly and making me nuts

May 23, 2007 2:28 PM

Why does the process of embedding a Youtube video suddenly seem beyond me and can you help?

I'm trying to embed some Youtube video in my sparkly updated blog/vanity page.

Something I'm doing means that in Firefox 2.0 you can't click on the big play button in the middle of the video. The little left hand corner play button works but when the video plays, the bottom third of the video stutters and hangs.

If I look at this in IE6, when I hover my mouse over the page there are two outlines which bring up the tool tip "click to activate and use this control". One surrounding the youtube video as usual, and one the same size as the youtube video shifted up and left. The bottom line of this second outline seems to directly match the line below which things go awry when watching the vid in Firefox. Also below this line in Firefox, I can click the video and it opens in a new youtube page. Above this line the mouse seems to flash between being a pointer and a hand very quickly and won't open up the youtube page.

What on earth have I done wrong? I'm losing the little hair I have left and my sentence structure is falling apart trying to explain this!

Site address is in my profile (it's just a shell at the moment so I hope it doesn't bring down the wrath of those who say self linking is the devls work). Hit the link marked "film" to the right of the logo.

Thanks

posted by merocet to computers & internet (10 comments total)

What tool are you using to maintain the blog? I've had trouble with the embedded TinyMCE visual editor mangling the embedded object tags for video in strange and annoying ways.
posted by Good Brain at 3:07 PM on May 23, 2007

I'm just customising a very basic blog template script in a text editor. It was all going swimmingly until I got to the video bit and then it all went to hell!
posted by merocet at 3:13 PM on May 23, 2007

best guess:

this is your css anchor a couple of lines above your youtube clip:

[div id="film" style="position: absolute; visibility: hidden; overflow: auto; overflow-x: hidden; id="main"]

first off, why is your visibility set to hidden, and second of all, the id="main" is superfluous, incorrectly placed, and on top of that, you're missing an " to end the style tag. see how the hyphen that starts the style section never closes itself?
posted by phaedon at 3:13 PM on May 23, 2007

Thanks Phaedon.

I closed the " for the style tag after the ; following overflow-x: hidden

I removed the superfluous id="main"

I changed visibility to visible and this seemed to cause more problems in that now the video shows up on the main front page obscuring the logo rather than appearing where I'd like it to be when I hit the "film" link.

Totally at a loss now. That'll teach me to try to be clever.
posted by merocet at 3:34 PM on May 23, 2007

if your video shifted positions, then maybe it has something to do with the id="main". you should take a deep breath and clean up your html; i noticed the id="main" thing pops up other places, you don't declare [body], you have javascript inside your css declaration. try adding a float:left; to your div id="film", maybe that'll help.

suffice to say, i've never heard of a problem where "part" of a youtube video works and the other doesn't. your embed line looks like it should work. you could have stumbled upon some esoteric IE6 problem, and i wouldn't know about it any more than you.
posted by phaedon at 3:46 PM on May 23, 2007

in fact, i'd rewrite the entire page and start with the youtube video by itself just to isolate whether or not the issue is how the browser renders it. wouldn't take you that long.
posted by phaedon at 3:50 PM on May 23, 2007

The problem seems to lie in this line in the film div:

embed width="425" height="350" wmode="transparent" type="application/x-shockwave-flash" src="http://www.youtube.com/v/SqXMAkFqlIc"/

For some reason, the area that this embed lies is directly over the area where I cannot click on the video. (Pic)
posted by Hargrimm at 4:41 PM on May 23, 2007

The problem seems to lie in this line in the film div:

embed width="425" height="350" wmode="transparent" type="application/x-shockwave-flash" src="http://www.youtube.com/v/SqXMAkFqlIc"/

Easily solvable.

The content area of my blog used to be a fixed width of 400px, so YouTube-ry would blow out the side.

But as with any Flash embed, just alter the dimensions to fit. Change both instances of width and height within the div to whatever suits the space you have available. Yes, you might distort the image somewhat, but this is YouTube. Pixellation and distortion and out-of-sync audio is just the way it goes, eh?
posted by grabbingsand at 5:44 PM on May 23, 2007

@grabbingsand: The problem does not seem to be that the video is too large, but that it is not in the place the code says it should be. Look at the picture. The blue box is where the code says the video is embedded, but the video is obviously not there.
posted by Hargrimm at 8:28 PM on May 23, 2007

That's my problem Hargrimm, it doesn't seem to be doing what it says it should. Ah well back to the drawing board. Thanks all for your help.
posted by merocet at 6:34 AM on May 24, 2007