Video inside Draggable container not playing

[tauab]

Hello!

 

I applied GSAP draggable to a container that houses a grid of images and videos. The dragging and throwProps works beautifully, the only issue I'm having is that the videos inside the div do not play. Sometimes the first frame will appear but that's about it. I ran some tests and found that videos outside of the draggable div would play, but the ones nested do not.

 

Any ideas? 

 

Below is the draggable set up I'm using:

 

Draggable.create("#columnsParent", 

{

type:"scrollLeft" , 

edgeResistance:0.5, 

throwProps:true,

throwResistance:1500,

onDragStart:function() 

{  

//trace('dragging');

CANVAS.dragging = true;

},

onClick:function() 

{  

//trace('Not dragging');

CANVAS.dragging = false;

}

 

});

 

Thanks for the time,

 

-Taua

[Jonathan]

Hello tauab, and welcome to the GreenSock Forum!

 

Without seeing a live code example it will be hard to know what is happening. If you can provide a limited reduced codepen example we can better help you! Here is a nice video tut by GreenSock on How to create a codepen demo example!

• Is your video youtube or vimeo embedded Iframes?
• Or is this a HTML5 video tag your using?

But that being said..

 

I have experienced this before. The only thing i can think of without seeing this live in the browser..  is that sometimes the transforms applied to an iframe that pulls video (youtube or vimeo) or its parent that is transformed, will need to have its transform zeroed out. Meaning you might have to either make your x, y,  z, scale, rotation, etc.. have a value of ZERO.. or remove the transform completely from the inline styles on the element.

 

It can also be a matter of other CSS properties you might have to modify on the video itself or on the videos parent.

 

The best way to find out, is if you can provide a codepen demo... this way we can test you code in a live editable environment to better see the issue.

 

Thank You

[tauab]

Hello tauab, and welcome to the GreenSock Forum!

 

Without seeing a live code example it will be hard to know what is happening. If you can provide a limited reduced codepen example we can better help you! Here is a nice video tut by GreenSock on How to create a codepen demo example!

• Is your video youtube or vimeo embedded Iframes?
• Or is this a HTML5 video tag your using?

But that being said..

 

I have experienced this before. The only thing i can think of without seeing this live in the browser..  is that sometimes the transforms applied to an iframe that pulls video (youtube or vimeo) or its parent that is transformed, will need to have its transform zeroed out. Meaning you might have to either make your x, y,  z, scale, rotation, etc.. have a value of ZERO.. or remove the transform completely from the inline styles on the element.

 

It can also be a matter of other CSS properties you might have to modify on the video itself or on the videos parent.

 

The best way to find out, is if you can provide a codepen demo... this way we can test you code in a live editable environment to better see the issue.

 

Thank You

Hey Jonathan,

 

Thanks for the swift reply! Unfortunately sharing the code on code pen is not an option as the content on the site is not to be disclosed before launch. If we cannot trouble shoot this "in the dark" so to speak, I can create a simplified version with alternate content which will take some time so I'm hoping the former will shake out.

 

To answer your question above: I am using an html 5 video tag. When I comment out the draggable constructor the video plays fine.

[Jonathan]

You wouldn't need all the code in your project in the codepen.. just a simple example showing the behavior described. You could just create a limited codepen example with just your html5 video tag and Draggable. This way we would just focus on the video with Draggable applied to it.

 

Here is a codepen example of Draggable working on a HTML5 video tag:

 

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

 

And as you can see, you can drag the video tag... even while playing.

 

I tested this in Firefox 31 and 32.. also in Chrome Version 37.0.2062.103 m .. on Windows 7 (64-bit)

 

[tauab]

You wouldn't need all the code in your project in the codepen.. just a simple example showing the behavior described. You could just create a limited codepen example with just your html5 video tag and Draggable. This way we would just focus on the video with Draggable applied to it.

 

Here is a codepen example of Draggable working on a HTML5 video tag:

 

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

 

And as you can see, you can drag the video tag... even while playing.

 

I tested this in Firefox 31 and 32.. also in Chrome Version 37.0.2062.103 m .. on Windows 7 (64-bit)

 

Thanks for the codepen example!

 

When I change the scroll type from "x,y" to "scrollLeft" I get the same problem I'm having. The video just doesn't play. Please check the link below.

 

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

[Jonathan]

What browser and OS are you testing on?

 

I got it to still play the video while using scrollLeft by wrapping the video tag in a div tag. Now it plays the video while dragging scrollLeft.

 

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

 

Does that help? If not .. maybe some of the other great Greensockers here can chime in with a better solution!

[Rodrigo]

Hi,

 

Great job Jonathan, excellent codepen!!!

 

The issue here is that the video tag probably doesn't have an overflow property, so there's nothing to scroll in the <video> tag. Keep in mind that when you set up a scroll type Draggable on an element, the child nodes of that element will be scrolled up/down, left/right, not the element. So what you have to do is apply the Draggable instance to the video tag parent element instead:

Draggable.create("#wrapper", {
   type:"scrollLeft",
	   bounds:"#wrapper",
	   edgeResistance:0.5
});

[tauab]

What browser and OS are you testing on?

 

I got it to still play the video while using scrollLeft by wrapping the video tag in a div tag. Now it plays the video while dragging scrollLeft.

 

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

 

Does that help? If not .. maybe some of the other great Greensockers here can chime in with a better solution!

Thanks Jonathan, but no luck yet.

 

One key consideration though, is that using type:"scrollLeft" seems to automatically generate a "wrapper" tag that reads as follows:

 

<div style="display: inline-block; width: 100%; padding-right: 0px; position: relative; overflow: visible; transform: translate3d(0px, 0px, 0px);">

 

While other drag types like "x,y" do not generate a wrapper tag by default. 

 

Please note that this tag does not show up on codepen but does in the browser. 

 

I believe this is where the issue lies. Can you explain what that tag does?

[tauab]

 

Hi,

 

Great job Jonathan, excellent codepen!!!

 

The issue here is that the video tag probably doesn't have an overflow property, so there's nothing to scroll in the <video> tag. Keep in mind that when you set up a scroll type Draggable on an element, the child nodes of that element will be scrolled up/down, left/right, not the element. So what you have to do is apply the Draggable instance to the video tag parent element instead:

Draggable.create("#wrapper", {
   type:"scrollLeft",
	   bounds:"#wrapper",
	   edgeResistance:0.5
});

Thanks Rodrigo,

 

To clarify, I applied the Draggable to a parent div. Draggable type: "x,y" works fine. But type: "scrollLeft" does not. I think it has something to do with a tag that is automatically generated that reads:

 

<div style="display: inline-block; width: 100%; padding-right: 0px; position: relative; overflow: visible; transform: translate3d(0px, 0px, 0px);">

[Rodrigo]

You're welcome.

 

I believe that the issue has to do with the fact that the content's width is smaller than the parent's width, therefore there's no where to scroll, so to speak. The following code works on Jonathan's latest codepen:

 

CSS

#wrapper {
  width:700px;
  height:400px;
  margin:10px 0 0 0;
  border:1px solid #777;
  background:#EEE;
  overflow:auto;
  position:relative; 
}

#box{
  position:relative;
  top:0;
  left:0;
  border:0 none transparent;
  width:2000px;
  height:100%;
}

JS

Draggable.create("#wrapper", {
     type:"scrollLeft",
	   edgeResistance:0.5 
});

Finally there's no need to apply bounds to a scroll-type Draggable instance, the bounds are enforced by the scroll width of the element.

[GreenSock]

It sounds like Rodrigo and Jonathan have it under control here so I haven't done much poking around (very short on time at the moment), but you could try setting force3D:false on your Draggable to see if that makes a difference. 

[tauab]

Hey guys,

 

Thank you for all your help, I finally figured it out! The problem was not related to div wrapping or overflow issues, the issue was on the javascript side.

 

I was calling the play() function before the draggable.create() which caused the issue, see below:

brandVid = document.getElementById('brandVid');
brandVid.play();

Draggable.create("#columnsParent", 
{
type:"scrollLeft" ,
bounds:"#columnsParent", 
edgeResistance:0.5, 
throwProps:true,
throwResistance:1500,
onDragStart:function() 
{  
//trace('dragging');
CANVAS.dragging = true;
},
onClick:function() 
{  
//trace('Not dragging');
CANVAS.dragging = false;
}

});

When I switched the order and called play() after the draggable.create() it worked! :

Draggable.create("#columnsParent", 
{
type:"scrollLeft" ,
bounds:"#columnsParent", 
edgeResistance:0.5, 
throwProps:true,
throwResistance:1500,
onDragStart:function() 
{  
//trace('dragging');
CANVAS.dragging = true;
},
onClick:function() 
{  
//trace('Not dragging');
CANVAS.dragging = false;
}

});

brandVid = document.getElementById('brandVid');
brandVid.play();

Thanks for your patience, hopefully this thread will help others who encounter the same issue – or maybe this was just a rookie mistake on my part