Jump to content
GreenSock

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

Iframe in Draggable

Recommended Posts

Hi

 

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 post
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" />
</video>

</div>

:

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 post
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 post
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

 

http://html5demos.com/postmessage2

 

https://msdn.microsoft.com/en-us/library/office/dn323656%28v=office.15%29.aspx

 

:)

  • Like 1
Link to post
Share on other sites

Hi there

 

I'm facing the same issue as describe above, and see that all the pen that solved the issue are brocken now :(

 

Any update on that topic ?! If no I may well send new pens to display the issue I encounter

 

Cheers

 

Link to post
Share on other sites
6 hours ago, jbonlinea said:

I'm facing the same issue as describe above, and see that all the pen that solved the issue are brocken now :(

 

Any update on that topic ?! If no I may well send new pens to display the issue I encounter

Yes, @jbonlinea, please start a new topic with a new minimal demo (CodePen) if you need some help. And of course it'd be best to use the latest version of GSAP/Draggable. 

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

×