Hi, I'm entirely new to scripting... and I've finally given up searching the internet and trying to come up with my own plugin.
What I'm trying to do is obtain the ID of the YouTube video and inputting it into the css of a div tag as a background. Here's what I've come up with to do this:
Code:
vid = split('src="http://www.youtube.com/v/')[1].split('&rel=0&egm=0&showinfo=0&fs=1" type="application/x-shockwave-flash" width="248" height="222" allowFullScreen="true" wmode="transparent"')[0];
(There are two splits because the needed 11-character ID is burried within the embed code.)
The above grab the 11-character ID, and input it accordingly (I assume):
Code:
<div id="test" style="background: url(http://img.youtube.com/vi/"11-character ID ends up here"/0.jpg) no-repeat middle;">Content</div>
So, I hope no one minds helping me. Thanks, in advance.
You're not using any framework, so I'm not sure why you posted this in the frameworks forum. You would have received more response from the parent javascript forum.
Are you trying to change the background on-the-fly, or do you just want to set a background image on page load?
If the first, you're doing it wrong. You'll need to set the style dynamically, not in the style attribute of the tag.
If the second, you need to do it on the server side.
You're not using any framework, so I'm not sure why you posted this in the frameworks forum. You would have received more response from the parent javascript forum.
Are you trying to change the background on-the-fly, or do you just want to set a background image on page load?
If the first, you're doing it wrong. You'll need to set the style dynamically, not in the style attribute of the tag.
If the second, you need to do it on the server side.
Oh, pardon my mistake. If a moderator would kindly move this thread to the parent javascript forum, I would be thankful.
Specifically, I want to set a background image on page load. Where the obtained 11 character video ID is placed into the "test" div's background, after obtaining the video ID from the original embedded video (which is in a seperate div).
That would be much easier to do on the server-side. If you need help with that portion of it, drop a line in the PHP forum (or ASP, or whatever else you may be using).
Oh, pardon my mistake. If a moderator would kindly move this thread to the parent javascript forum, I would be thankful.
Specifically, I want to set a background image on page load. Where the obtained 11 character video ID is placed into the "test" div's background, after obtaining the video ID from the original embedded video (which is in a seperate div).
something like this:
Code:
var yt = 'http://www.youtube.com/watch?v=Z0_Bfy0sVxU';
var vid = yt.replace(/v=(.{11})/,"$1");
var objid = document.getElementById('test');
var plist = objid.getElementsByTagName('param');
for(var i=0; i< plist.length; i++){
if(plist[i].name == 'movie'){
var yt = plist[i].value;
var vid = yt.replace(/v\/(.{11})/,"$1");
}
}
it's just a improvisation, I'm sure can be rewrited in better way, but this is the idea.
best regards
Code:
<script>
$(document).ready(function() {
var objid = document.getElementById('test');
var plist = objid.getElementsByTagName('param');
for(var i=0; i< plist.length; i++){
if(plist[i].name == 'movie'){
var yt = plist[i].value;
var vid = yt.replace(/v\/(.{11})/,"$1");
}
}
$(function () {
$("#here").append("<div style="background: url(http://img.youtube.com/vi/" + vid + "/0.jpg) no-repeat middle;
width: 150px; height: 150px;"></div>");
});
});
</script>
<div id="here">
<div id="test" style="display: none;">video embedded here</div>
</div>
The above is how I'm actually placing it in the html. I don't know what I'm doing wrong, since it won't add the div that I'm trying to add within the "here" div.
Before you post, read our: 
