CODEWITHSUNDEEP
jqueryfancybox
Paul Kendal
Paul Kendal

Reputation: 565

video gallery with fancyBox

I am trying to create a video gallery on a web page.

I have opted for fancyBox. i have gotten it to work. i however have two problems.

First:
I want the first video in the listing to show up as soon as the page renders.

Second:
I do not want the vidoe's to autmotically start. i want users to manualy start them.

This is the working code on fiddle :

http://jsfiddle.net/Xh3B2/

e.g see the image below

enter image description here

At the moment however,you need to click a link before the first video shows on the page. i.e

My Code;

Video #1

Video #2

function videoFancyBox()  {                     
    $(".fancybox")
        .attr('rel', 'gallery')
        .fancybox({
            openEffect  : 'none',
            closeEffect : 'none',
            nextEffect  : 'none',
            prevEffect  : 'none',
            padding     : 0,
            margin      : [20, 60, 20, 60] // Increase left/right margin
        });
 }

UPDATE: JFK has kindly answered question one; i simply needed to place this at the end of hte code: .eq(0).click();

However, i am still having trouble with the auto start of the videos; i changed one of the params in the link to

 autoplay= 0;

However the video is still running once loaded

<a class="fancybox_video fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=0&enablejsapi=1&wmode=opaque">Video #1</a>

Upvotes: 1

Views: 2777

Answers (2)

JFK
JFK

Reputation: 41143

Fir the first question, just add .eq(0).click() at the end of your fancybox initialization script like

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        // API options
    })
    .eq(0).click();

The method .eq(0) targets the first (index 0) selector .fancybox and the method .click() triggers a programmatic click on it after the page loads.

For the second question, just change the trailing parameter autoplay to 0 as suggested by @user10

JSFIDDLE

Upvotes: 1

USER10
USER10

Reputation: 974

Video player automatically start to disable to change autoplay=1 to autoplay=0 ... 

http://www.youtube.com/embed/L9szn1QQfas?autoplay=0&wmode=opaque

Upvotes: 0

Related Questions