Jump to content


Cannot drag container when 'grabbing' <video> inside container on iPad

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


I am building a page that builds multiple 'scenes' horizontally in the content area.  Only one scene is visible in the area at a time.  Users can drag the scene container to get to other scenes.  I've done this using Draggable.  For the most part, it has worked great.


However, some scenes have a large video in them.  When running on the iPad (chrome and safari), if the user touches the video and attempts to drag the container in order to move to the next scene, it does not drag.  I've tried adding data-clickable="false" to the video tag but it still doesn't work.  This all works on the desktop as far as I've tested it.


Here is a code pen sample of what I'm talking about.  You can drag the grey container box, but if you try to drag over the video, the container won't move.


See the Pen yohqG by anon (@anon) on CodePen


I'm using iOS 7.1, but the same thing happens in an older version as well.

Link to comment
Share on other sites

Does setting dragClickables:true help at all? And did you mean to set data-clickable="true"? 

Link to comment
Share on other sites

If I set the attribute either way it doesn't seem to make a difference.  In fact, the video is clickable no matter which I put.  My understanding is that setting data-clickable to "true" tells Draggable to allow this otherwise non-clickable element to be clickable and disregard the dragging.  Is that right?


As an aside, I had to set a different clickable <div> as data-clickable = "true" in order for it to be clickable inside the drag container.  This made it so you couldn't drag on the div (same as the video), but at least you could click on it.  This isn't a huge problem because the div isn't that big.  But maybe the 2 issues are related.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.