Video Carousel

587 views
Skip to first unread message

djw...@gmail.com

unread,
May 16, 2016, 7:22:59 PM5/16/16
to Google Web Designer beta
Is it possible to create a video carousel? Just like the one for the photos, but with videos or YouTube videos? I can't find a template.

Thanks

GWD 1.6.0.0429
Mac Os X 10.10.5

Google Web Designer beta

unread,
May 17, 2016, 2:51:08 PM5/17/16
to Google Web Designer beta
Hi,

You can add them as group in the Carousel gallery.
In order to do so, you first have to create groups for YouTube video:

1. Drag YouTube component to stage
2. In Properties panel, add url and set autoplay to none (default)
3. Right click on the video component on stage
4. Select Create group from the context menu
5. Name the group and set the ID
6. Repeat the steps above to create more groups

Then drag the Carousel gallery component to stage and add the groups in Properties panel (see the screenshot).
Set autoplay to standard.  More controls are available under the Advanced properties.

Hope it helps,

Rika
(GWD team)
screenshot1.png

djw...@gmail.com

unread,
May 20, 2016, 7:28:22 PM5/20/16
to Google Web Designer beta
Thanks! That works, but now we have a couple of issues.

1.- The first YouTube video shows the play button, but won't play unless you swipe. It's also missing the play controls.

2.- Video 2, auto play.

Since play controls are missing, both videos won't stop unless you leave or refresh the page.

I think the swipe is triggering the videos to play but is there a way to change it so that instead of swiping it plays when it's clicked by the user?

Below is a link to the sample and to the files so you can take a look at them.

::::SAMPLE::::
http://www.djwoody.com/gwd/carousel/sample/

::::FILES::::
http://www.djwoody.com/gwd/carousel/downloads/

Thanks!
- Jesse

rika

unread,
May 23, 2016, 7:05:39 PM5/23/16
to Google Web Designer beta
Hi Jesse,

If you don't set 'autoplay' in the gallery, the play button will show.  We cannot control this.  
Generally, you cannot interact with the group instances in the gallery, but you may add the event listener like following to allow users to play video on 
the frame tap:

          gwd-carouselgallery_1 -> frametap -> custom action:
          var frame = this.getFrame(this.currentIndex);
          var youtube = frame.querySelector('gwd-youtube');
          youtube.play();

However, we can control 'play' only, not 'pause'.  We cannot see if a video is already playing in the YouTube component, so we can't check in order to 
toggle it.

I've also updated your files with the following changes:

- Updated your YouTube videos so they won't show any control
- Uncheck 'Resume media when entering frame' in Advanced properties

Please see the attached file.

Regards,
Rika
(GWD team)

GWD_YoutubeVideoCarousel_modeified.zip
Reply all
Reply to author
Forward
0 new messages