Embedding youtube videos

HTML & CSS
1

Hi,

I am having some trouble embedding youtube videos. I of course know about the simple embed code within youtube itself but I am trying to replicate the videos (not coded by me) that are present here: http://jamesgoodwin.co.uk/new-site/listen.html and add new clips (along the bottom row)

The code is:

<object width=“300” height=“300” style=“float: left;padding: 5px;”>
<param name=“movie” value=“http://www.youtube.com/v/5bwdxPw3qNI&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1” />
<param name=“allowFullScreen” value=“true” />
<param name=“allowscriptaccess” value=“always” />
<embed src=“http://www.youtube.com/v/5bwdxPw3qNI&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1” width=“300” height=“300” align=“middle” type=“application/x-shockwave-flash” allowscriptaccess=“always” allowfullscreen=“true”></embed>
</object>

I have tried copying the code above and replacing the youtube URL unique to a different video within the ‘value’ and the ‘embed src’ tags but this doesn’t seem to work.

Can anyone advise how to replicate this kind of embedding method with other video clips?

It would be greatly appreciated.

Sam

2

You can just play with the URLs a bit. For example, if I take a YouTube vid at random, the URL looks like this:

[noparse]https://www.youtube.com/watch?v=5MzLfzCn8_4[/noparse]

But that doesn’t follow the same pattern as you see in your code:

[noparse]http://www.youtube.com/v/5bwdxPw3qNI[/noparse]

But you can modify the new link to follow the same pattern:

[noparse]https://www.youtube.com/v/5MzLfzCn8_4[/noparse]

Paste that into your code, and it works fine:

<object width="300" height="300" style="float: left;padding: 5px;">
<param name="movie" value="[COLOR="#FF0000"]https://www.youtube.com/v/5MzLfzCn8_4[/COLOR]&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="[COLOR="#FF0000"]https://www.youtube.com/v/5MzLfzCn8_4[/COLOR]&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1" width="300" height="300" align="middle" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

So basically, just take the last part of any YouTube URL (after the = sign) and paste it into your code here:

<object width="300" height="300" style="float: left;padding: 5px;">
<param name="movie" value="http://www.youtube.com/v/[COLOR="#FF0000"]5bwdxPw3qNI[/COLOR]&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/[COLOR="#FF0000"]5bwdxPw3qNI[/COLOR]&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1" width="300" height="300" align="middle" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
3

Yes, in this way Google’s “old embed code” with Flash should be working.
But … wasn’t it so, that Ipad & Iphone don’t support Flash? :wink:
If you want to make Ipad & Iphone visitors also happy with the videos, you have to use the “new code” with an <iframe>: that is working with Flash and html5.

<iframe width="420" height="315"
   src="//www.youtube.com/embed/[COLOR="#FF0000"]5bwdxPw3qNI[/COLOR]?rel=0"
   frameborder="0" allowfullscreen>
</iframe>
4

Hi ralph.m,

Thanks for this, I was replacing the straight youtube URL into the existing code but I wasn’t adding the &h1 after the youtube link which resolved the issue. I’m not sure why.

Thanks for your help, appreciated.

Sam

Francky,

Thanks for this too, I’m sure they’ll want a decent response from mobile and tablets so I will experiment with this too.

Cheers, Sam