Grow your CSS skills. Land your dream job.

Quick Help On This.

  • # June 3, 2013 at 12:11 am

    I am working on this [website.](http://www.ctrlshiftstudios.com/ChurchSite “”)
    I want when a user clicks on the video play icon, a fancybox will load or pop up on top of the web page which will have the actual video. After watching the video, the user can click on ‘X’ icon or just hit ‘esc’ or just click outside the video to close it.

    Can anyone point a god tutorial where i can quickly learn this and implement it.
    Or can anyone give me a quick codepen example.

    Thank you.

    # June 3, 2013 at 12:19 am

    There are tons and tons of these all over the web, what can’t you do?

    # June 3, 2013 at 1:02 am

    Pls check the [web page](http://www.ctrlshiftstudios.com/ChurchSite/ “”) again. I have done. But the video is not playing. It says it cannot find the address, but when you type in the video url in the browser it starts playing. Here is the [video.](https://vimeo.com/49468725 “”)

    EDIT:
    It’s working. I was testing it on localhost.

    # June 3, 2013 at 1:54 am

    Initially it wasn’t doing anything. Now it redirects to Vimeo which indicates it isn’t working. I’ll take a look soon.

    # June 3, 2013 at 3:29 am

    In the console, there’s an error on line 16 that says `$ is not defined`.

    # June 3, 2013 at 3:41 am

    Further debugging and it appears that your hotlinking the fancybox files on your site which they are denying access. Try uploading the files to your own server and linking them from there.

    # June 3, 2013 at 4:00 am

    Check again. [Here.](http://www.ctrlshiftstudios.com/ChurchSite/ “”)
    It’s working now.

    # June 3, 2013 at 2:24 pm

    It’s actually not working for me.

    Update: After clearing my cache, it seems to work. If I were you, I’d use Google’s jQuery. Yours is what caused it to not work.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".