Hi,
Thanks for responding and sorry to put you to so much trouble.
I put the first three lines in the head and the rest in the footer <div> of the <body> because when I was looking at the colorbox website he said the link had to go in the <head> section. I've moved them back together now, all in the footer <div>.
I created a sub-directory in minoan called colorbox as you said, and then I extracted the zip file into that sub-directory. But the structure goes minoan-colorbox-colorbox and then in that subdirectory there's yet another colorbox plus content and examples 1-5, all in their own folders. When I click on the video icon I get a full screen version of the YouTube video opening in the same window. If I remove the
colorbox directory that I created so that the structure goes minoan-colorbox- and then the folders colorbox, contents, examples 1-5, I still get the full screen version of YouTube.
So what I did was:
In the link it says href="colorbox/colorbox.css" so having created a sub-directory of minoan called colorbox I tried putting the chosen css file there together with jquery.colorbox.js and jquery.colorbox.min.js. I deleted everything else. With the three files above, one of the examples works but if I replace it with the css from one of the other examples they don't work properly. So I obviously screwed up somewhere.
I have now reinstated everything as follows minoan-colorbox and inside that colorbox is colorobox, contents, examples 1-5 etc. But of course I'm still getting the full screen version of YouTube in the same window.
Also I've put the video icon code in and it works except for the fact that it has turned the text to the left of the icon into a link to the video as well. Here is the code
<div class="header">
<a title="Pseira" href="http://www.youtube.com/embed/6KvPy0yhR5k" class="youtube cboxElement" rel="youtube"><img src="video_icon.jpg" class="icon"</a>
<h1 class="small">TITLE GOES HERE</h1>
</div>
(end of header)
