Fun of JavaScript: floating youTube video

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Free JavaScript: floating YouTube Video
This fun JavaScript makes youTube videos float and fly all over your webpage. True copy-and-paste installation. Internet Explorer 5x/6x/7x/8x and Firefox 2x/3x, Opera 7x/8x/9x/10x and Google Chrome 3x/4x/5x/6x/7x

Configuration

Step 1: Open your webpage and paste the following code right above the </body>-tag, close to the bottom of the page:

<script>
// CREDITS:
// Joy of JavaScript: Floating YouTube Video script
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
/////////////////////////////////////////////////

// The URL of the youtube movie
// In order to get the URL visit www.youtube.com, select your movie,
// then click button "embed" and extract the URL from the code
var movieurl="http://www.youtube-nocookie.com/v/SljA0xZAYD0?fs=1&hl=de_DE"

// width of the video-player (pixel). You can extract the width from the embed-code
var moviewidth=480

// height of the video-player (pixel). You can extract the height from the embed-code
var movieheight=385

// The floating speed (higher=faster)
var floatingspeed=2

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION ENDS HERE
/////////////////////////////////////////////////

// Do not edit below this line
var tempo=10
var numberofimages=0
var stepx=new Array()
var stepy=new Array()
stepx=randommaker(floatingspeed)
stepy=randommaker(floatingspeed)

var imgwidth
var imgheight
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
var timer

var spancontent="<object width="+moviewidth+" height="+moviewidth+"><param name='movie' value='http://www.youtube.com/v/GwQMnpUsj8I&hl=en&fs=1'></param><param name='allowFullScreen' value='true'></param><param name='allowscriptaccess' value='always'></param><embed src='"+movieurl+"&autoplay=1' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true'&autoplay=1 width="+moviewidth+" height="+movieheight+"></embed></object>"

function setValues() {
	if (document.all) {
    	marginbottom=document.body.clientHeight-5
    	marginright=document.body.clientWidth-5
	}
	else {
    	marginbottom=window.innerHeight-11
    	marginright=window.innerWidth-11
	}         
	var thisspan=document.getElementById('moviespan')
	thisspan.innerHTML=spancontent
	imgwidth=parseInt(thisspan.offsetWidth)
	imgheight=parseInt(thisspan.offsetHeight)
	var maxleftstart=marginright-imgwidth
	var maxtopstart=marginbottom-imgheight
	var thisspan=document.getElementById('moviespan').style
    thisspan.left=parseInt(thisspan.left)+randommaker(maxleftstart)+"px"
	thisspan.top=parseInt(thisspan.top)+randommaker(maxtopstart)+"px" 
	thisspan.visibility="visible"

checkmovement()
}

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
	if (rand==0) {rand=Math.ceil(range/2)}
    return rand
}

function checkmovement() {
	checkposition()
	movepictures()
    timer=setTimeout("checkmovement()",tempo)
}

function stopmovement() {
	clearTimeout(timer)
}

function restartmovement() {
	checkmovement()
}

function movepictures() {
    var thisspan=document.getElementById('moviespan').style
    thisspan.left=parseInt(thisspan.left)+stepx+"px"
	thisspan.top=parseInt(thisspan.top)+stepy+"px"
}

function checkposition() {
	imgwidth=parseInt(document.getElementById('moviespan').offsetWidth)
	imgheight=parseInt(document.getElementById('moviespan').offsetHeight)         
	var thisspan=document.getElementById('moviespan').style
	var leftx=parseInt(thisspan.left)
	var topy=parseInt(thisspan.top)
	if (leftx>marginright-imgwidth-floatingspeed-32) {
		thisspan.left=leftx-Math.abs(stepx+1)
		stepx=randommaker(floatingspeed)*-1	
	}
	if (leftx<marginleft) {
		thisspan.left=leftx+Math.abs(stepx)
		stepx=randommaker(floatingspeed)			
	}	
	if (topy>marginbottom-imgheight-floatingspeed) {
		thisspan.top=topy-Math.abs(stepy)
		stepy=randommaker(floatingspeed)*-1
	}
	if (topy<margintop) {
		thisspan.top=topy+Math.abs(stepy)
		stepy=randommaker(floatingspeed)
	}
}

document.write("<span id='moviespan' onMouseover='stopmovement()' onMouseout='restartmovement()' style='position:absolute;top:0px;left:0px;visibility:hidden'></span>") 
document.close()

window.onload=setValues

</script>

IMPORTANT: Do not paste this code into any tables or <DIV> and </DIV> or between any other container!

Step 2: Visit www.youtube.com, select a video, click button "embed" (just below the video-player) and copy the code. Now you have to extract the URL, the width and the height of video (highlighted red):

Step 3: Go to the top of the script and configure the URL, the width and the height of the video: