Short Video as Pasteboard

**xtom** · 25 August 2015, 12:51 PM

Nice one Rob, going to check that out when I get the chance.

**Acorn** · 25 August 2015, 06:25 PM

Originally Posted by Rob-Xar

Curiosity got the better of me and I thought how hard would it be to make a video background, here is my attempt:

http://robert74.magix.net/video-background/

I would suggest uploading your video to YouTube and use the project linked on that page to import it into Xara.

Use the ID "xr_xr" for the wrapper.

Thanks
Rob

Respect.

It will be asked, so could you upload your design file?

Acorn

**Rob-Xar** · 26 August 2015, 06:43 AM

Originally Posted by Acorn

Respect.

It will be asked, so could you upload your design file?

Acorn

Hi,

Please see file here: video-background.xar

Thanks
Rob

**mikeymopar** · 26 August 2015, 12:39 PM

Originally Posted by Rob-Xar

Curiosity got the better of me and I thought how hard would it be to make a video background, here is my attempt:

http://robert74.magix.net/video-background/

I would suggest uploading your video to YouTube and use the project linked on that page to import it into Xara.

Use the ID "xr_xr" for the wrapper.

i like how it's auto-scalable from the get-go. only drawbacks (at least for me) is not being able to test it off-line as stated in the plug-in description coupled with the fact that it's only for youtube videos.

all in all it's a clean process and was easy to incorporate. nice find and share Rob. yet another bookmark. thx

**xtom** · 28 August 2015, 11:10 AM

I gave this a go but it doesn't seem to get on well with stickies. The background video is ok but other page elements end up displaying over my sticky header instead of the other way around. Also it looks like embedding youtube videos with default iframe code makes them appear over stickies too.

Edit: just discovered if you set the option wrapperZIndex to a lower number like 1 it seems to work ok with stickies.

Code:

<script>
$('document').ready(function() {
	var options = { videoId: 'ab0TSkLe-E0', start: 3, wrapperZIndex: 1 };
	$('#xr_xr').tubular(options);
	// f-UGhWj1xww cool sepia hd
	// 49SKbS7Xwf4 beautiful barn sepia
});
</script>

**Teeser** · 29 August 2015, 10:08 AM

Hi Rob-Xar, your 'attempt' is brilliant! Just what I am looking for. http://robert74.magix.net/video-background/

Could you please explain to me in really easy, step by step idiot's language how you did that?

Many thanks Teeser

**mikeymopar** · 29 August 2015, 02:55 PM

Originally Posted by Teeser

Hi Rob-Xar, your 'attempt' is brilliant! Just what I am looking for. http://robert74.magix.net/video-background/

Could you please explain to me in really easy, step by step idiot's language how you did that?

hmmm. did you follow the link that is in his example that you quoted ^

it takes you to the plug-in developer's page. (and you need an editor like notepad++ or sublime)

copy paste steps 1 and 2, find the end </head> in your index.htm and copy it just before it

Code:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="index_htm_files/jquery.tubular.1.0.js"></script>
</head>

copy step 3 just before the end </body> in your index.htm between a <script> </script> block

Code:

<script>
$('document').ready(function() {
	var options = { videoId: 'w7JrHIHi8t0', start: 0 };
	$('#xr_xr').tubular(options);
	// f-UGhWj1xww cool sepia hd
	// 49SKbS7Xwf4 beautiful barn sepia
});
</script>
</body>

on the left under downloads, dl the tubular zip and in the js folder copy the jquery.tubular.1.0.js file to your index_htm_files folder

now, find the youtube video id you want to use and copy it to the videoID from his step 3 (the part you copied to the <body>)

should be good to go from there