Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Stephane Demotte

Iframe in Draggable

Recommended Posts



I have a draggable with a iframe, in mobile, i can't move if my first touch is in the iframe.

The scrolltop is good, the touch on desktop too, but on mobile nothing.


So i can't use Draggable if i have a video(youtube/video) inside, on mobile.


If i hijack with dragClickables:true, all my links and the play button in the iframe become unavailable.


Anyone have a solution ?


Thanks :)



See the Pen XJexMj by stephanedemotte (@stephanedemotte) on CodePen

Link to comment
Share on other sites

Hello Stephane Demotte, and welcome to the GreenSock Forum.


In order for you to drag a video its best to use the HTML5 <video> tag, and not an iframe.


(Keep in mind that Vimeo might block the video link URL in codepen, if too many requests hit their server for the cdn. So you would have to grab the video link directly from within your Vimeo account, as described below)


And here is an example it playing your Vimeo video, and it being Draggable:


See the Pen NPaeyz by jonathan (@jonathan) on CodePen


<div id="wrapper">

<video id="videofile" class="w_full" preload="auto" controls="false" width="360">
  <source src="http://pdl.vimeocdn.com/56440/221/266073082.mp4?token2=1423059145_2920e4452f3bd1b27d1d90b7f781dc3a&aksessionid=1992386b43bb850e" />



Here is an example of dragging a video that is an MP4 file:


See the Pen xeatn by jonathan (@jonathan) on CodePen


Please note that to play Vimeo videos you need to get the video source link .. not the Vimeo link to the Vimeo video page.


You'll need to use the video source link code for it to work. //player.vimeo.com/video/55756295?color=ffcb30&title=0&byline=0&portrait=0 is not a video file, it is an HTML page, so putting it in a video tag won't do anything. So you will either have to use your browser inspector to grab the video source or go to the Vimeo website to grab the video source.


To get your video to work i had to grab the Vimeo source of the video: http://pdl.vimeocdn.com/56440/221/266073082.mp4?token2=1423059145_2920e4452f3bd1b27d1d90b7f781dc3a&aksessionid=1992386b43bb850e


In Vimeo:

Go to your Video Settings and Video File, at the bottom there is a section called Use Your Own Player, you'll find there direct urls to your video.


Hope this helps :)

  • Like 2
Link to comment
Share on other sites

humm ok !


So we are forced to use a video html5 player, vimeo, youtube, etc.... will block the drag.. good to know !


Thank a lot for your help ;)

Link to comment
Share on other sites

your not really forced to use a html5 video tag.. but if you use an iframe which is how most YouTube or Vimeo videos are embedded.. you will run into some issues that have to do with iframes and cross domain origin and policy.


html5 has api's in the work for cross domain policy with iframes.. but they are not a standard yet and require extra help from JavaScript to workaround this limitation.


see the below let links for my more info on post message







  • Like 1
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.