Video clips from streamable.com not shown properly


(Hosein Naseri) #1

In the mobile version, video clips that are right before the end of topic arent shown properly and the container seems to be cut in half

here the video clip is shown half,

here I cant see the player control bar for the second video


(Régis Hanol) #2

Can you reproduce on https://try.discourse.org?

Do you have any custom CSS that might affect this?


(Hosein Naseri) #3

sure. here you are:

https://try.discourse.org/t/video-clip-problem/725

In my cellphone, this is what I see:

I don’t think so. My custom CSSs are minimal.


(Hosein Naseri) #4

btw I think its the same thing but its worth adding this photo too

see the free space above video and the video masked some of the text bellow it.


(Hosein Naseri) #5

I just realized that this problem happens in normal browsers too (not just mobile). When we make the width of browser smaller


(Jeff Atwood) #6

Unless you can repro on try.discourse.org this is probably specific to your CSS and site.


(Hosein Naseri) #7

I have tried it in the second reply here and I even took some pictures that you can see. However the topic I created is now deleted in try.discourse. If its needed again, I’ll create another example there.


(Jeff Atwood) #8

I see, so this is a LTR-RTL text related problem then, somehow?


(Hosein Naseri) #9

No it happens for LTR texts too:

https://try.discourse.org/t/testing-for-video-problem/723


(Jeff Atwood) #10

Sorry, you are reporting that an unsupported tiny browser width causes problems? Why is that surprising?

If you need very narrow width, switch to mobile layout from the hamburger menu.


(Hosein Naseri) #11

Its not so different for mobile:


(Jeff Atwood) #12

So you are reporting a problem specific to https://streamable.com/pui16 ? I don’t see this problem with YouTube or Vimeo. Perhaps if you had mentioned that at the start, it could have saved people some time…


(Hosein Naseri) #13

Yes you’re right. I didn’t realize it could be site specific. So I should discuss this issue with streamable.com support?


(Jeff Atwood) #14

I dunno, maybe, let’s see what @eviltrout says since he last worked on oneboxing.


(Robin Ward) #15

It is definitely their CSS. I can make it look nice by removing the height on div.media-container and then removing the position: absolute from div#play-overlay:


(Hosein Naseri) #16

So I should ask their support to correct this? Or should i put some custom css on my forum?


(Jeff Atwood) #17

Assuming the parent site CSS can affect their iframe, that is a potential workaround.


(Hosein Naseri) #18

I have asked streamable support guys to take a look at this issue. First they told me that according to the information I provided for them, they fixed some of the bugs. However the problem didn’t get fixed. And I provided them with this link to take a deeper look. This is their response:

Looks like a bug in discourse to me. No idea why the height and width are getting set on the iFrame. You can see in the oEmbed response that we’re returning the correct code: https://api.streamable.com/oembed.json?url=https://streamable.com/omdos.

On the other hand, I put this custom CSS in the template, However it didn’t do anything:

.media-container{
height: none !important;
max-width: 177.78vh ;
}
#play-overlay{
position: none;
}

Any idea @eviltrout ?


(Mittineague) #20

I have never seen the value “none” for height or position.
Are you sure that is valid CSS?


(Hosein Naseri) #21

idk how should I remove these two lines as @eviltrout said in custom CSS. All it came to my mind was this and I tested it in firebug and it worked though.