...

View Full Version : JQuery Help!: YouTube thumbnail variation



Kotse
12-29-2009, 02:04 AM
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:


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):

<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. :)

Kotse
12-29-2009, 02:52 AM
Sorry, for the double post. But, are there any takers?

tomws
12-29-2009, 06:36 PM
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.

Kotse
12-29-2009, 07:34 PM
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).

tomws
12-29-2009, 07:55 PM
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).

oesxyl
12-29-2009, 08:02 PM
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:


var yt = 'http://www.youtube.com/watch?v=Z0_Bfy0sVxU';
var vid = yt.replace(/v=(.{11})/,"$1");

then put vid where you want.

best regards

Kotse
12-29-2009, 09:40 PM
something like this:


var yt = 'http://www.youtube.com/watch?v=Z0_Bfy0sVxU';
var vid = yt.replace(/v=(.{11})/,"$1");

then put vid where you want.

best regards

To make it more generic, is it possible to obtain the yt variable from the actual embedded YouTube video within a specific <div>?

oesxyl
12-30-2009, 12:48 AM
To make it more generic, is it possible to obtain the yt variable from the actual embedded YouTube video within a specific <div>?
probably yes. Can you post a example with a div?

best regards

Kotse
12-30-2009, 07:27 AM
probably yes. Can you post a example with a div?

best regards

For example:

<div id="test" style="display: none;"><object width="248" height="222"><param name="movie" value="http://www.youtube.com/v/YCU-qgR_4bM&amp;rel=0&amp;egm=0&amp;showinfo=0&amp;fs=1"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/YCU-qgR_4bM&amp;rel=0&amp;egm=0&amp;showinfo=0&amp;fs=1" type="application/x-shockwave-flash" width="248" height="222" allowFullScreen="true" wmode="transparent"></embed></object></div>

oesxyl
12-30-2009, 06:31 PM
For example:

<div id="test" style="display: none;"><object width="248" height="222"><param name="movie" value="http://www.youtube.com/v/YCU-qgR_4bM&amp;rel=0&amp;egm=0&amp;showinfo=0&amp;fs=1"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/YCU-qgR_4bM&amp;rel=0&amp;egm=0&amp;showinfo=0&amp;fs=1" type="application/x-shockwave-flash" width="248" height="222" allowFullScreen="true" wmode="transparent"></embed></object></div>


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

Kotse
12-30-2009, 09:25 PM
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


<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.

Thanks for helping me, by the way.

tomws
12-30-2009, 09:27 PM
"here" is an id - it needs the "#": $('#here')

Kotse
12-30-2009, 09:38 PM
"here" is an id - it needs the "#": $('#here')

Yeah, I saw that and changed it accordingly. It still doesn't work...

tomws
12-30-2009, 09:40 PM
You also have an issue with quotes in that line. Your browser should be spitting out a javascript error.

Kotse
12-30-2009, 09:44 PM
You also have an issue with quotes in that line. Your browser should be spitting out a javascript error.

Oh, how should I write it?

oesxyl
12-30-2009, 09:58 PM
will be better to rewrite my code using jquery selectors yt will be $('param[name=movie]').value after you restrict search only inside the $('div#test').

best regards

Kotse
12-30-2009, 10:41 PM
will be better to rewrite my code using jquery selectors yt will be $('param[name=movie]').value after you restrict search only inside the $('div#test').

best regards


$(document).ready(function() {
var objid = document.getElementById('di#{PostID}');
var plist = objid.getElementsByTagName('param');
for(var i=0; i< plist.length; i++){
if(plist[i].name == 'movie'){
var yt = $('param[name=movie]').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>");
});
});

So, like this? I'm not sure if it's right since it still is not appending.

oesxyl
12-30-2009, 10:50 PM
$(document).ready(function() {
var yt = $('div#{PostID} > object > param[name=movie]').attr('value');
var vid = yt.replace(/v\/(.{11})/,"$1");
$("here").append('<div style="background: url(http://img.youtube.com/vi/' + vid + '/0.jpg) no-repeat middle; width: 150px; height: 150px;"></div>');
});

not sure what is {PostID} but must be a id value.

best regards

Kotse
12-30-2009, 11:00 PM
$(document).ready(function() {
var yt = $('div#{PostID} > object > param[name=movie]').attr('value');
var vid = yt.replace(/v\/(.{11})/,"$1");
$("here").append('<div style="background: url(http://img.youtube.com/vi/' + vid + '/0.jpg) no-repeat middle; width: 150px; height: 150px;"></div>');
});

not sure what is {PostID} but must be a id value.

best regards

Oh, {PostID} is from tumblr's theme generator. I can inbox you the page, to see how it's not working.

oesxyl
12-30-2009, 11:01 PM
Oh, {PostID} is from tumblr's theme generator. I can inbox you the page, to see how it's not working.
post a link if you can.

best regards

Kotse
12-30-2009, 11:05 PM
post a link if you can.

best regards

http://onedraft.tumblr.com

The blocks with a red background and a play button are the video posts. Where the red background is supposed to be the thumbnail of the video (if it's from YouTube). Check the source, as {PostID} generates a numeric ID for the specific post.

oesxyl
12-30-2009, 11:53 PM
http://onedraft.tumblr.com

The blocks with a red background and a play button are the video posts. Where the red background is supposed to be the thumbnail of the video (if it's from YouTube). Check the source, as {PostID} generates a numeric ID for the specific post.
- generated ids are invalid, must start with a char
- the part of the script which use jquery.ready is inserted twice inside the body, what I found, line 662 and 697
anyway something stop parsing and execute javascript before this lines.

best regards

Kotse
12-31-2009, 12:07 AM
- generated ids are invalid, must start with a char
- the part of the script which use jquery.ready is inserted twice inside the body, what I found, line 662 and 697
anyway something stop parsing and execute javascript before this lines.

best regards

Well, the script has to be placed within the area of the video post, to obtain the video posts generated id (I will add a character at the beginning), considering that multiple video posts on one page is possible, which is also why I wanted a general script.

Is this still possible?

oesxyl
12-31-2009, 01:03 AM
Well, the script has to be placed within the area of the video post, to obtain the video posts generated id (I will add a character at the beginning), considering that multiple video posts on one page is possible, which is also why I wanted a general script.
I understand, that's because of {PostID} which is local in the template for each block.


Is this still possible?
yes, and if I'm not wrong it's easy. You can get all div elements with class name 'block_contains' and you can use jquery.each to append the code as you want.
I assume that you don't use 'div.block_containts' combination in another place and each have a id.
In my opinion first step is to make it work for a div with a given id, first for example, and then extend for the script for all.

best regards

Kotse
01-01-2010, 01:15 AM
I understand, that's because of {PostID} which is local in the template for each block.


yes, and if I'm not wrong it's easy. You can get all div elements with class name 'block_contains' and you can use jquery.each to append the code as you want.
I assume that you don't use 'div.block_containts' combination in another place and each have a id.
In my opinion first step is to make it work for a div with a given id, first for example, and then extend for the script for all.

best regards

I've figured out a different way to do this. Anyway, thanks for the help! :)

oesxyl
01-01-2010, 01:20 AM
I've figured out a different way to do this. Anyway, thanks for the help! :)
you are welcome. I'm glad you solved, :)

happy holidays and best regards



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum