Media bar error

HTML & CSS
1

The media bar / videos in this section were working http://umcwales.com/#recent-projects ( the pink box with vids n ), however now when you click on them they are displaying this error:

Not Found

The requested URL /undefined was not found on this server.

Apache/2 Server at umcwales.com Port 80

Can anyone help me on this? Would be much appreciated
Many thanks

2

Hi,

You can see the problem if you check out the iframe with (for example) Chrome’s web inspector:

<iframe id="fancybox-frame" name="fancybox-frame1352465749626" frameborder="0" hspace="0" scrolling="auto" src="undefined"></iframe>

The src attribute is undefined, whereas it should read http://www.youtube.com/watch?feature=endscreen&NR=1&v=yHocNtrD3FQ

My guess is that this attribute is set somewhere using JavaScript and that there is an error either with this code, or including the code which is responsible for this.

If I were you, I would make a bare bones page with one FancyBox video on it (which hopefully will then work), and compare this with your current page.

If you can do this and post a link to a barebones page with a working FancyBox video on it, I don’t mind taking a look.

3

OH GREAT!!! Well I really appreciate your help. There is a working version here, is it any help?

4

Hi,

So, I had a bit of time to look at your page and I’ve found the problem.
The videos have URLs like this: http://www.youtube.com/watch?feature=endscreen&NR=1&v=bxDyomFVXqo
What you need to do is to remove the feature=endscreen&NR=1& part for each URL, so you are left with http://www.youtube.com/watch?v=bxDyomFVXqo

Also, you have not closed any of these links.
Here’s the revised code. Copy and paste this into your HTML file and things should work as expected.
The only video I couldn’t get to work was the final one (http://youtu.be/sBOAzy24JGE), but I’m guessing this is a problem with the URL, as well.

HTH

ca. line 204.

<div class="project">
  <a href="http://youtu.be/sBOAzy24JGE" class="et-video et_video_lightbox" title="Shaykh Fawzan">
    <img src="http://umcwales.com/wp-content/uploads/et_temp/youtube_logo-12462_140x72.jpg" class='project-image'  alt='Shaykh Fawzan' width='140' height='72' />
    <span class="zoom-icon"></span>
    <span class="project-overlay"></span>
  </a>
</div> <!-- end .project -->

<div class="project">
  <a href="http://www.youtube.com/watch?v=yHocNtrD3FQ" class="et-video et_video_lightbox" title="Life 4">
    <img src="http://umcwales.com/wp-content/uploads/et_temp/life4-44907_140x72.png" class='project-image'  alt='Life 4' width='140' height='72' />
    <span class="zoom-icon"></span>
    <span class="project-overlay"></span>
  </a>
</div> <!-- end .project -->

<div class="project">
  <a href="http://www.youtube.com/watch?v=69RXRPcxTF8&NR=1" class="et-video et_video_lightbox" title="Life 3">
    <img src="http://umcwales.com/wp-content/uploads/et_temp/life3-46280_140x72.png" class='project-image'  alt='Life 3' width='140' height='72' />
    <span class="zoom-icon"></span>
    <span class="project-overlay"></span>
  </a>
</div> <!-- end .project -->

<div class="project">
  <a href="http://www.youtube.com/watch?v=bxDyomFVXqo" class="et-video et_video_lightbox" title="Life 2">
    <img src="http://umcwales.com/wp-content/uploads/et_temp/life2-45251_140x72.png" class='project-image'  alt='Life 2' width='140' height='72' />
    <span class="zoom-icon"></span>
    <span class="project-overlay"></span>
  </a>
</div> <!-- end .project -->

<div class="project">
  <a href="http://www.youtube.com/watch?v=F96Wl4n-h5w" class="et-video et_video_lightbox" title="Life">
    <img src="http://umcwales.com/wp-content/uploads/et_temp/life-45855_140x72.png" class='project-image'  alt='Life' width='140' height='72' />
    <span class="zoom-icon"></span>
    <span class="project-overlay"></span>
  </a>
</div> <!-- end .project -->
5

that’s fantasitic!!!

A big thanks i never would have done it
much appreciated

6

You’re very welcome.
Happy to help :slight_smile: