|
JavaScript - Css Theme Youtube: Graphics?
I am looking to create a Stylesheet for YouTube, to make it look nicer and customise it completely I wanted to change the logo, but its a graphic. I was wondering if it would be possible to do this by linking to one hosted on Flickr?
Or is there another trick? Similar Tutorialshey guys i have graphic on the right side of the screen that is not in view and i am scrolling it to the left. Is there away to remove the bottom scrollbar permanently through using a mask or something. if i have an item scrolling from the left the scroll bar does not show, but on the right it does. an help be appreciated. Folks, I have been in IT for many years, but completely new to javascripting and ajax etc. I develop web sites and the php, html coding etc is no issue, its just that I have never needed to do any javascript coding and therefore have not used it at all. Picking it up should present little problem, but as of this moment, I am a complete tyro, and I need to get moving on this requirement ASAP. I have a requirement which I haver never before needed to address. I would be grateful for some pointers to resources (I have searched and searched..... ) which I could use to develop the functionality I need. After that rambling intro, here is the actual issue..... I need to have a variety of areas on a single picture on the website, each of which if clicked on, will go to a different article. Rather than try to explain, here is a link which does a similar thing, although this one is in Flash (which I also don't know): http://www.comcare.gov.au/virtual_wo...fice/reception I need to do pretty much the same thing, though with a different picture and words of course. The website will be a Joomla based site. I hope I have gived enough information, and indeed, hope that I have posted to the right area! Any assistance or thoughts at all would be greatly appreciated. regards to all, Mike As it is, I'm using Walter Zorn's JS Graphics Library in an attempt to write a small screensaver-type-thing for jailbroken iPhones/iPod touches. However, on my mom's AMD Athlon 64 3000+, the drawing gets pretty laggy, so you can imagine how utterly choppy it is on my iPod. The look I'm going for is the Windows XP Mystify screen saver, with corners bouncing around the screen. So, my first question is this: are there any alternatives for this sort of thing, short of manually generating a video, gif, or multiple images to switch through, or is there any way to make my code more efficient for the CPU? (Code below) NOTE: I know I could make it look a lot nicer by making a 'corner' class, and having each corner be an object (and even nicer by using an array of 'corners'). But I'm not sure that would help the CPU's calculations much, and make the code more efficient as a whole. Code: <div id="Mystify">
<script type="text/javascript">
var mystifyCanvas = new jsGraphics("Mystify");
var tetraCorner1x = Math.floor(Math.random()*300) + 5;
var tetraCorner1y = Math.floor(Math.random()*460) + 5;
var tetraCorner2x = Math.floor(Math.random()*300) + 5;
var tetraCorner2y = Math.floor(Math.random()*460) + 5;
var tetraCorner3x = Math.floor(Math.random()*300) + 5;
var tetraCorner3y = Math.floor(Math.random()*460) + 5;
var tetraCorner4x = Math.floor(Math.random()*300) + 5;
var tetraCorner4y = Math.floor(Math.random()*460) + 5;
go1x = true;
go1y = false;
go2x = true;
go2y = true;
go3x = false;
go3y = true;
go4x = false;
go4y = false;
function MystifyJavaScript()
{
mystifyCanvas.clear();
mystifyCanvas.setColor("#ff0000");
mystifyCanvas.setStroke(2);
if (go1x)
{
tetraCorner1x++;
if (tetraCorner1x > 315)
{
go1x = false
}
}
else
{
tetraCorner1x--;
if (tetraCorner1x < 5)
{
go1x = true
}
}
if (go1y)
{
tetraCorner1y++;
if (tetraCorner1y > 475)
{
go1y = false
}
}
else
{
tetraCorner1y--;
if (tetraCorner1y < 5)
{
go1y = true
}
}
if (go2x)
{
tetraCorner2x++;
if (tetraCorner2x > 315)
{
go2x = false
}
}
else
{
tetraCorner2x--;
if (tetraCorner2x < 5)
{
go2x = true
}
}
if (go2y)
{
tetraCorner2y++;
if (tetraCorner2y > 475)
{
go2y = false
}
}
else
{
tetraCorner2y--;
if (tetraCorner2y < 5)
{
go2y = true
}
}
if (go3x)
{
tetraCorner3x++;
if (tetraCorner3x > 315)
{
go3x = false
}
}
else
{
tetraCorner3x--;
if (tetraCorner3x < 5)
{
go3x = true
}
}
if (go3y)
{
tetraCorner3y++;
if (tetraCorner3y > 475)
{
go3y = false
}
}
else
{
tetraCorner3y--;
if (tetraCorner3y < 5)
{
go3y = true
}
}
if (go4x)
{
tetraCorner4x++;
if (tetraCorner4x > 315)
{
go4x = false
}
}
else
{
tetraCorner4x--;
if (tetraCorner4x < 5)
{
go4x = true
}
}
if (go4y)
{
tetraCorner4y++;
if (tetraCorner4y > 475)
{
go4y = false
}
}
else
{
tetraCorner4y--;
if (tetraCorner4y < 5)
{
go4y = true
}
}
mystifyCanvas.drawLine(tetraCorner1x, tetraCorner1y, tetraCorner2x, tetraCorner2y);
mystifyCanvas.drawLine(tetraCorner2x, tetraCorner2y, tetraCorner3x, tetraCorner3y);
mystifyCanvas.drawLine(tetraCorner3x, tetraCorner3y, tetraCorner4x, tetraCorner4y);
mystifyCanvas.drawLine(tetraCorner4x, tetraCorner4y, tetraCorner1x, tetraCorner1y);
mystifyCanvas.paint();
window.setTimeout("MystifyJavaScript()", 10);
}
MystifyJavaScript();
</script>
</div>
Please keep in mind, there's a LOT of repeat code, so you only have to read any one part once. To test/see/use the code, you'll need to download wz_graphics.zip. Then download the attached txt file to the same directory as the unzipped wz_graphics, change it to .html instead of .txt, and open it. http://vietnamthereandback.com/mainpage.html The arrows next to the songs previews are randomly appearing/disappearing on page refresh. There are always 8 arrows, but each refresh shows the arrows in different places. This has really got me stumped. If anyone has any thoughts, I'd really appreciate hearing them. The basic button/arrow code is below. The only thing that changes in the MP3 file name. <code> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="30" height="30"> <PARAM NAME=movie VALUE="http://www.vietnamthereandback.com/Clips/audioplay.swf?file=http://www.vietnamthereandback.com/Clips/reflections.mp3&auto=no&sendstop=yes&repeat=1&buttondir=http://www.vietnamthereandback.com/Clips/buttons/negative_small&bgcolor=0xffffff&mode=playpause"> <PARAM NAME=quality VALUE=high> <PARAM NAME=wmode VALUE=transparent> <embed src="http://www.vietnamthereandback.com/Clips/audioplay.swf?file=http://www.vietnamthereandback.com/Clips/reflections.mp3&auto=no&sendstop=yes&repeat=1&buttondir=http://www.vietnamthereandback.com/Clips/buttons/negative_small&bgcolor=0xffffff&mode=playpause" quality=high wmode=transparent width="30" height="30" align="" TYPE="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object> </code> Hi, I am trying to make a Wordpress theme from this in HTML: http://www.jbiddulph.com/chrisbradshaw/ to this (wordpress blog) http://www.jbiddulph.com/blog/ Why doesn't the JavaScripts? do I need to @import them like the CSS? I bet you all hate WordPress questions (sorry!) but the WordPress support forum is useless. I use the Sandbox theme, which has two sidebars, but they are both on the left hand side, one on top of the other. Can anyone explain how I can either move one of these sidebars to the right hand side? Or how I can create a new sidebar and put it on the right hand side? I've tried editing the theme code myself. My blog is http://www.ieltsielts.com Thanks in advance. Is there a way to use google anayltics to track how many people clicked onto my video from my site to watch it? how long they stayed on the video, where they came from, ect?
Can anyone help me modify this script to be able to view feeds of type media rather apps? I want it to work as it does for a channel rather than all of youtube. I've tried changing the settings at the top and a lot of other stuff but no luck so far... getting desperate here. I'm willing to pay at this point but I don't have much. I neeeeeed this script. It could be in PHP even. However it must be completely dynamic and allow me to make searches against the channel. Code: var quvic = {};
quvic.MAX_RESULTS_LIST = 50;
quvic.THUMBNAIL_WIDTH = 124;
quvic.THUMBNAIL_HEIGHT = 93;
quvic.PLAYER_WIDESCREEN_WIDTH = 720;
quvic.PLAYER_STANDARD_WIDTH = 540;
quvic.PLAYER_HEIGHT = 405;
quvic.VIDEO_LIST_CSS_CLASS = 'videolist';
quvic.PREVIOUS_PAGE_BUTTON = 'previousPageButton';
quvic.NEXT_PAGE_BUTTON = 'nextPageButton';
quvic.STANDARD_FEED_URL_TOP_RATED =
'http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?';
quvic.STANDARD_FEED_URL_MOST_VIEWED =
'http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed?';
quvic.STANDARD_FEED_URL_MOST_POPULAR =
'http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?';
quvic.STANDARD_FEED_URL_RECENTLY_FEATURED =
'http://gdata.youtube.com/feeds/api/standardfeeds/recently_featured?';
quvic.VIDEO_FEED_URL =
'http://gdata.youtube.com/feeds/api/videos?';
quvic.QUERY_URL_MAP = {
'top_rated' : quvic.STANDARD_FEED_URL_TOP_RATED,
'most_viewed' : quvic.STANDARD_FEED_URL_MOST_VIEWED,
'most_popular' : quvic.STANDARD_FEED_URL_MOST_POPULAR,
'recently_featured' : quvic.STANDARD_FEED_URL_RECENTLY_FEATURED,
'search' : quvic.VIDEO_FEED_URL
};
quvic.nextPage = 2;
quvic.previousPage = 0;
quvic.previousSearchTerm = '';
quvic.previousQueryType = 'search';
quvic.jsonFeed_ = '';
quvic.appendScriptTag = function(scriptSrc, scriptId, scriptCallback) {
var oldScriptTag = document.getElementById(scriptId);
if (oldScriptTag) {
oldScriptTag.parentNode.removeChild(oldScriptTag);
}
var script = document.createElement('script');
script.setAttribute('src',
scriptSrc + '&v=2&alt=jsonc&callback=' + scriptCallback);
script.setAttribute('id', scriptId);
script.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(script);
};
quvic.listVideos = function(queryType, searchTerm, page) {
quvic.previousSearchTerm = searchTerm;
quvic.previousQueryType = queryType;
var queryUrl = quvic.QUERY_URL_MAP[queryType];
if (queryUrl) {
queryUrl += 'max-results=' + quvic.MAX_RESULTS_LIST +
'&format=5&start-index=' + (((page - 1) * quvic.MAX_RESULTS_LIST) + 1);
if (searchTerm != '') {
queryUrl += '&q=' + encodeURI(searchTerm);
}
quvic.appendScriptTag(queryUrl,
'searchResultsVideoListScript',
'quvic.listVideosCallback');
quvic.updateNavigation(page);
} else {
alert('Unknown feed type specified');
}
};
quvic.PresentVideos = function(queryType, searchTerm, page) {
quvic.previousSearchTerm = searchTerm;
quvic.previousQueryType = queryType;
var queryUrl = quvic.QUERY_URL_MAP[queryType];
if (queryUrl) {
queryUrl += 'max-results=' + quvic.MAX_RESULTS_LIST +
'&format=5&start-index=' + (((page - 1) * quvic.MAX_RESULTS_LIST) + 1);
if (searchTerm != '') {
queryUrl += '&q=' + encodeURI(searchTerm);
}
quvic.appendScriptTag(queryUrl,
'searchResultsVideoListScript',
'quvic.listVideosCall');
quvic.updateNavigation(page);
}
};
quvic.listVideosCall = function(json) {
quvic.jsonFeed_ = json.data;
var div = document.getElementById(quvic.VIDEO_LIST_CSS_CLASS);
var items = json.data.items || [];
var html = ['<dl class="videos">'];
for (var i = 0; i < items.length; i++) {
var title = json.data.items[i].title;
var thumbnailUrl = json.data.items[i].thumbnail.sqDefault;
var videoID = json.data.items[i].id;
var duration = json.data.items[i].duration;
html.push('<dt><span class="video_thumb thumbbox"><a href="javascript:playVideo(\''+videoID+'\',\''+addslashes(title)+'\')">');
html.push('<img src="',thumbnailUrl,'" width="',quvic.THUMBNAIL_WIDTH,'" height="',quvic.THUMBNAIL_HEIGHT,'" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\'',videoID,'\',1)"></a>');
html.push('<span class="duration">',getDurationTime(duration),'</span>');
html.push('</span>');
html.push('<br/>', title.substr(0,37), '</dt>');}
html.push('</dl><br style="clear: left;"/>');
jQuery(div).fadeTo(500, 1.0);
document.getElementById(quvic.VIDEO_LIST_CSS_CLASS).innerHTML = html.join('');
if (items.length > 0) {
loadVideo(json.data.items[0].id);
}
};
function loadVideo(videoID) {
swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "?version=3&enablejsapi=1&playerapiid=ytplayer&fs=1&autohide=1",
'player', quvic.PLAYER_WIDESCREEN_WIDTH, quvic.PLAYER_HEIGHT, '9.0.0', false, false, {allowScriptAccess: 'always',allowfullscreen: 'true'});
}
quvic.listVideosCallback = function(json) {
quvic.jsonFeed_ = json.data;
var div = document.getElementById(quvic.VIDEO_LIST_CSS_CLASS);
while (div.childNodes.length >= 1) {
div.removeChild(div.firstChild);
jQuery(div).fadeTo(0, '.01');
}
var items = json.data.items || [];
var html = ['<dl class="videos">'];
for (var i = 0; i < items.length; i++) {
var title = json.data.items[i].title;
var thumbnailUrl = json.data.items[i].thumbnail.sqDefault;
var videoID = json.data.items[i].id;
var duration = json.data.items[i].duration;
html.push('<dt><span class="video_thumb thumbbox"><a href="javascript:playVideo(\''+videoID+'\',\''+addslashes(title)+'\')">');
html.push('<img src="',thumbnailUrl,'" width="',quvic.THUMBNAIL_WIDTH,'" height="',quvic.THUMBNAIL_HEIGHT,'" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\'',videoID,'\',1)"></a>');
html.push('<span class="duration">',getDurationTime(duration),'</span>');
html.push('</span>');
html.push('<br/>', title.substr(0,37), '</dt>');}
html.push('</dl><br style="clear: left;"/>');
jQuery(div).fadeTo(500, 1.0);
document.getElementById(quvic.VIDEO_LIST_CSS_CLASS).innerHTML = html.join('');
};
quvic.updateNavigation = function(page) {
quvic.nextPage = page + 1;
quvic.previousPage = page - 1;
document.getElementById(quvic.NEXT_PAGE_BUTTON).style.display = 'inline';
document.getElementById(quvic.PREVIOUS_PAGE_BUTTON).style.display = 'inline';
if (quvic.previousPage < 1) {
document.getElementById(quvic.PREVIOUS_PAGE_BUTTON).disabled = true;
} else {
document.getElementById(quvic.PREVIOUS_PAGE_BUTTON).disabled = false;
}
document.getElementById(quvic.NEXT_PAGE_BUTTON).disabled = false;
};
function onPlayerError(errorCode) {
alert("An error occured of type:" + errorCode);
}
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("player");
ytplayer.addEventListener("onError", "onPlayerError");
}
function playVideo(videoID,title){
if(document.title)
document.title = title;
ytplayer.loadVideoById(videoID);
}
function HDPlayer() {
resizePlayer(quvic.PLAYER_WIDESCREEN_WIDTH, quvic.PLAYER_HEIGHT);
}
function HQPlayer() {
resizePlayer(quvic.PLAYER_STANDARD_WIDTH, quvic.PLAYER_HEIGHT);
}
function resizePlayer(width, height) {
var playerObj = document.getElementById("player");
playerObj.height = height;
playerObj.width = width;
}
function addslashes(str) {
str=str.replace(/\'/g,'\\\'');
str=str.replace(/\"/g,'');
return str;
}
function stripslashes(str) {
str=str.replace(/\\'/g,'\'');
return str;
}
var imname;
var timer;
function mousOverImage(name,id,nr){
if(name)
imname = name;
imname.src = "http://img.youtube.com/vi/"+id+"/"+nr+".jpg";
imname.style.border = '3px solid silver';
nr++;
if(nr > 3)
nr = 1;
timer = setTimeout("mousOverImage(false,'"+id+"',"+nr+");",1000);
}
function mouseOutImage(name){
if(name)
imname = name;
imname.style.border = '3px solid #fff';
if(timer)
clearTimeout(timer);
}
function getDurationTime(sec)
{
var sec_div = ''+((sec%60) | 0);
if(sec_div.length == 1)
sec_div = '0'+sec_div;
return ((sec/60) | 0)+':'+sec_div;
}
This draws on jQuery JavaScript Library v1.4.2 and swfObject; A similar script providing this functionality would also be acceptable. I have used this tool in order to display all my youtube videos. http://www.php-help.ro/mootools-12-j...ched-playlist/ When you go over the thumbnail of one of the videos, you can see the title of each video (the title of the specific video in youtube). I want this title to be displayed before the thumbnail (above it). Can someone tell me please how can I do it? There are 4 JS files, 1 CSS and a small html code (all on the link provided). Thanks! Just to let you know if you don't know how to do this is the code I use: It will solve the problem of the clip scrolling over text etc. <embed wmode="transparent" src="youtube URL" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="280" height="240"></embed> (mods, do with this as you please). Hi all. I'm new comer here and i have no idea to find the way how to create youtube like content locker. Is possible to lock / hide content for visitor until they liked video on youtube ? I'm very basic using javascript and i don't know how to start coding. I would to thanks to all who answering my questions. Regards I am using a javascript replace code to embed youtube videos in my forum. It works fine except users on iPhone or iPad can't see the videos. I would like to added the url to the video under the embed code - so these users can just click the link and see the vid on youtube. Here is the script in question: Code: z[x].innerHTML = z[x].innerHTML.split("[YOUTUBE]").join("<iframe width=560 height=410 src='").split("/watch?v=").join("/v/").split("[/YOUTUBE]").join("' frameborder=0 allowfullscreen></iframe>");
I am not very good with the split & join functions. Can someone help me out.. I would like the code to place the you tube video link like so: Code: z[x].innerHTML = z[x].innerHTML.split("[YOUTUBE]").join("<iframe width=560 height=410 src='").split("/watch?v=").join("/v/").split("[/YOUTUBE]").join("' frameborder=0 allowfullscreen></iframe>< br><a href="youtube video link">View on YouTube</a> ");
Hi, I started with the template on this site: http://www.pupinc.com/videobox/ However, I have about a dozen videos with more to come so I added a vertical scrollbar to navigate through the thumbnails. My problem is I don't know how to separate the main video player so that it doesn't scroll with the thumbnails. HTML: Code: <div id="middle4">
<div class="videobox" style="height: 360px; overflow-y: scroll;">
<ul>
<li><a href="http://www.youtube.com/watch?v=iFGEHtqNZis">TRS 50X35</a></li>
<li><a href="http://www.youtube.com/watch?v=9CaN2KBYpo8">98X104 Automobile Shredder</a></li>
<li><a href="http://www.youtube.com/watch?v=BWHXX6u3tVk">60x60 Aluminum</a></li>
<li><a href="http://www.youtube.com/watch?v=ZiWDKtdfqWQ">60X60 System</a></li>
<li><a href="http://www.youtube.com/watch?v=VMbbXcFju9E">Portable Shredding System</a></li>
<li><a href="http://www.youtube.com/watch?v=WEn5xtJwtu4">60X85 System</a></li>
<li><a href="http://www.youtube.com/watch?v=1cOxYQB5icg">60X60 White Goods</a></li>
</ul>
</div>
</div>
JS: Code: // Videobox object
VideoBox = Class.create();
VideoBox.prototype = {
// Initialize object.
initialize: function(index, item) {
this.index = index;
this.item = item;
this.item.addClassName('videoboxjs');
this.list = this.item.getElementsBySelector('ul')[0];
// Create div.bigvideo and add it just before the ul.
this.bigvideo = document.createElement('div');
Element.addClassName(this.bigvideo, 'bigvideo');
this.item.insertBefore(this.bigvideo, this.list);
// Create array of videothumbs.
this.thumbs = new Array;
// Opera 9 doesn't like 'li a' in getElementsBySelector, so you
// have to break it apart.
var links = this.item.getElementsBySelector('li');
for (var i=0; i < links.length; i++) {
this.thumbs[i] = new VideoThumb(index, i, links[i].getElementsBySelector('a')[0]);
}
// Load up the first video.
this.swap(0);
},
// Replace existing video with new one.
swap: function(index) {
// IE 6 won't show the video unless something else is in the box.
// I chose to add a <br /> which I hide via CSS.
this.bigvideo.innerHTML = '<br /><object width="425" height="350"><param name="movie" value="' + this.thumbs[index].video + '"></param><param name="wmode" value="transparent"></param><embed src="' + this.thumbs[index].video + '" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>';
// Deselect all the thumbnails.
this.thumbs.invoke('deselect');
// Select the current thumbnail.
this.thumbs[index].select();
}
};
// Videothumb object
VideoThumb = Class.create();
VideoThumb.prototype = {
// Initialize object.
initialize: function(boxindex, index, link) {
this.boxindex = boxindex;
this.index = index;
this.item = link;
this.href = this.item.getAttribute('href');
// Extract the v querystring value from the href. Youtube uses this
// value for everything.
this.videocode = this.href.toQueryParams().v;
// Direct link to the video for use in the object/embed
this.video = 'http://www.youtube.com/v/' + this.videocode;
// Create thumbnail image and append it inside the list item
var img = document.createElement('img');
img.src = 'http://img.youtube.com/vi/' + this.videocode + '/default.jpg';
img.alt = this.item.innerHTML;
img.title = this.item.innerHTML;
this.item.innerHTML = "";
this.item.appendChild(img);
// Observe the click event.
Event.observe(this.item, 'click', this.swap.bindAsEventListener(this));
},
swap: function(evt) {
// Call the swap method of the parent videobox with the thumbnail
// thumbnail index as a parameter.
aVB[this.boxindex].swap(this.index);
// Stop the event so the browser doesn't follow the link.
if (evt) {
Event.stop(evt);
}
},
select: function() {
this.item.addClassName('current');
},
deselect: function() {
this.item.removeClassName('current');
}
};
// Don't do anything if we're using Opera 8 or earlier.
if (!Prototype.Browser.Opera || (Prototype.Browser.Opera && navigator.userAgent.toLowerCase().charAt(navigator.userAgent.toLowerCase().indexOf('opera') + 6) > 8)) {
// Create array of videoboxes so you can have more than one on a page.
var aVB = new Array;
$$('div.videobox').each ( function(videobox, index) {
aVB[index] = new VideoBox(index, videobox);
});
}
Ok, I have a problem with iframe code my function looks like this: Code: createPlayer: function (cfg) {
var div = document.getElementById(cfg.block2);
var hold = document.createElement('div');
hold.className = 'ytPlayer';
var iframe = document.createElement('iframe');
iframe.setAttribute('id', cfg.block + 'Player');
iframe.setAttribute('width', '70%');
iframe.setAttribute('height', cfg.height);
iframe.setAttribute('frameBorder', '0');
iframe.setAttribute('src', 'http://www.youtube.com/embed/' + ytPlayerParams.videoId + '?enablejsapi=1&autoplay=' + ytPlayerParams.autoplay + '&modestbranding=1');//controlbar set
iframe.setAttribute('allowfullscreen', '');
hold.appendChild(iframe);
div.insertBefore(hold, div.firstChild);
//return iframe;
},
and i was trying to add something that will call a function when the video in iframe will end.. i tryed setting evets for onStateChange but didnt work (probably did something wrong).. i tryed alot of things but it just didnt work when i paused the vid or when vid ended.. can anyone somehow help me?? Thanks in advance. Hi, I'm new at this stuff, like, super new. Basically, I want to call Fancybox to open a youtube video in a scrolling gallery. I think it's pretty simple to do but so far I can only get it to open when it is specifically clicked on and not part of the scrolling gallery. I think I need a different thing besides "click" to call the function but I have no idea what. For you pros, this should be easy (I hope). Please help! Code: $(document).ready(function() {
$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'swf' : {'mode':'transparent'}
});
$("a#p20").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {'allowfullscreen':'true'}
});
return false;
});
});
This is my HTML Code: <a rel="example_group" href="images/portfolio/crapbooking.jpg"><img alt="" src="images/portfolio/crapbooking_thumb.jpg" /></a>
<a rel="example_group" href="images/portfolio/acuppakoko.jpg"><img alt="" src="images/portfolio/acuppakoko_thumb.jpg" /></a>
<a id="p20" rel="example_group" href="http://www.youtube.com/watch?v=GaidsWnSOz0"><img alt="" src="images/portfolio/hongkong_thumb.jpg" /></a>
Thoughts? I'm using Fiddler (web debugging tool) and the below code is JScript .NET, which is basically a .NET version of Javascript. Code: if (oSession.HostnameIs("www.youtube.com") && oSession.oResponse.headers.ExistsAndContains("Content-Type","text/html")) // oSession is a Fiddler object session
{
oSession.utilDecodeResponse(); // Remove any compression or chunking
oSession.utilReplaceInResponse('<b>','<u>'); // Search and replace in HTML
}
How do I replace youtube video player with this message? Code: <div id="player-unavailable" class=" player-width player-height player-unavailable ">
<div class="icon meh"></div>
<div class="content">
<h1 id="unavailable-message" class="message">
This video is no longer available because of inappropriate content.
</h1>
<div id="unavailable-submessage" class="submessage">
Sorry about that.
</div>
</div>
</div>
Thank you Alright, I am going to post the sections that matter, and then post the full JS at the bottom. Alright, so youtube allows you to pull videos using javascript. here is the what I am using Code: function insertVideos(div,typ,q,results,overlay){
inlineVideo = overlay;
youtubediv[q.toLowerCase()] = div;
var script = document.createElement('script');
if(typ == "favs")
script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/favorites?max-results='+results+'&alt=json-in-script&callback=youtubeInit');
if(typ == "user")
script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/uploads?max-results='+results+'&alt=json-in-script&callback=youtubeInit');
script.setAttribute('id', 'jsonScript');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
alright, and here is the HTML code. Code:
<div id="youtubeDivFavs" align="center">
</div>
<script>
insertVideos('youtubeDivFavs','favs','lancxeon','5',0);
</script>
<div id="youtubeDivUser" align="center">
</div>
<script>
insertVideos('youtubeDivUser','user','lancxeon','5',0);
</script>
Now as you can see there are two here. the second one "user" pulls from the url http://gdata.youtube.com/feeds/users/lancxeon/uploads It works fine on my website. the second one pulls from http://gdata.youtube.com/feeds/users/lancxeon/favorites It does not work. It makes no sense as you can see both of the urls work fine. I have already tried only using the favorites one and getting rid of the user one.. to see if it was interfering. And it still would not work. It truly makes no sense to me why it does not work, if one works why will the other not work? Here is the full JS file Code: <!--
var cleanReturn = 1; //do you want a full youtube return, or just an image list
var inlineVideo = 1; //do you want to redirect to youtube, or play inlinevideo
var timer;
var i =0;
var youtubediv = new Array();
function clearList(ul){
var list = document.getElementById(ul);
while (list.firstChild)
{
list.removeChild(list.firstChild);
}
}
function hideOverlay(){
var overlay = document.getElementById('youtubeoverlay');
overlay.style.display = 'none';
overlay.innerHTML = "";
}
function videoOverlay(id){
var objBody = document.getElementsByTagName("body").item(0);
if(objBody){
var video = document.createElement('div');
video.setAttribute('id', 'youtubeoverlay');
video.innerHTML = '<div id="youtubecontent"><a href="javascript:hideOverlay()" id="close">Close</a><br /><object width="510" height="420"><param name="movie" value="http://www.youtube.com/v/'+id+'"></param><param name="autoplay" value="1"><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/'+id+'&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="510" height="420"></embed></object></div>';
objBody.insertBefore(video, objBody.firstChild);
}else{
alert('no body element. please add');
}
}
function mousOverImage(name,id,nr){
if(name)
imname = name;
//make border orange
imname.style.border = '4px solid orange';
imname.src = "http://img.youtube.com/vi/"+id+"/"+nr+".jpg";
nr++;
if(nr > 3)
nr = 1;
timer = setTimeout("mousOverImage(false,'"+id+"',"+nr+");",1000);
}
function mouseOutImage(name){
if(name)
imname = name;
//make border back to greyish
imname.style.border = '4px solid #333333';
if(timer)
clearTimeout(timer)
}
function getVideoId(url){
var match = url.lastIndexOf('=');
if (match) {
id = url.substring(match+1);
return id;
}
}
function getId(string){
var match = string.lastIndexOf("'s Videos");
if (match != -1) {
id = string.substring(0,match);
return id.toLowerCase();
}
var match = string.lastIndexOf("query");
if (match != -1) {
id = string.substring(match+7);
return id.toLowerCase();
}
}
function listVideos(json,divid) {
divid.innerHTML = '';
var ul = document.createElement('span');
ul.setAttribute('id', 'youtubelist');
if(json.feed.entry){
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
url = entry.link[k].href;
break;
}
}
var thumb = entry['media$group']['media$thumbnail'][1].url;
var li = document.createElement('span');
li.setAttribute('id', 'youtubebox');
if(cleanReturn == 1){
if(inlineVideo == 1){
li.innerHTML = '<a href="javascript:videoOverlay(\''+getVideoId(url)+'\');"><img src="'+thumb+'" id="youtubethumb" alt="'+entry.title.$t+'" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\''+getVideoId(url)+'\',2)"></a>';
}else{
li.innerHTML = '<tr><a href="'+url+'" target="_new"><img src="'+thumb+'" border="0" id="youtubethumb" alt="'+entry.title.$t+'" title="'+entry.title.$t+'" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\''+getVideoId(url)+'\',2)"></a>';
}
}else{
li.innerHTML = entry.content.$t;
}
ul.appendChild(li);
}
}else{
divid.innerHTML = 'No Results Found';
}
document.getElementById(divid).appendChild(ul);
}
function youtubeInit(root) {
//this hacks the layer for mutiple json queries
id = getId(root.feed.title.$t);
listVideos(root, youtubediv[id]);
}
function insertVideos(div,typ,q,results,overlay){
inlineVideo = overlay;
youtubediv[q.toLowerCase()] = div;
var script = document.createElement('script');
if(typ == "favs")
script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/favorites?max-results='+results+'&alt=json-in-script&callback=youtubeInit');
if(typ == "user")
script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/uploads?max-results='+results+'&alt=json-in-script&callback=youtubeInit');
script.setAttribute('id', 'jsonScript');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
//-->
hello Devs, i have a website that has lots of videos on it, the other day i saw a mouse over that showed a snippet of the youtube video, it had microsoft across the front it's since been deleted so i cannot show you an example, does anyone know where i can obtain this script please?
see below
|
|||||||