Need help with edge cases on custom YouTube Modal script

[shaneisme]

So I’m having difficulty finding an elegant solution to this and I hope I’m just missing something simple. I know I can do a bunch of media queries if I have to… but I was wondering if I can do without.

Please view in full CodePen: http://codepen.io/drainpip/pen/IgCzq

When clicking on the “Video” link everything works as intended on the scripting portion, but in extreme instances (like here in CodePen default view) the viewport is very wide and very short because the .ytModal-box is set to width 80%. I have to declare a width so the children will fall in line and the video will adjust while retaining its aspect ratio.

Is there something I can do to make the video stay within full view in this instance without resorting to media queries?

[GSutherland]

You want to make sure the youtube container is never taller than the window, right? Couldn’t you just dynamically set a max-width in the case that the height is taller than the aspect ratio requires?

I.E: when the plugin inits, set a variable to the height divided by the width, then if the height of the video is over the height of the window set the max-width of the video to its width multiplied by the variable you set. Bind that to window.resize (and get rid of the max-height if not necessary).

[shaneisme]

Yes that is an option as well, I was hoping to do it without having to bind an event to resize (even debounced). It’s a good option though.

The more I mess with it, the more I don’t think there’s a simple / elegant CSS solution…

[GSutherland]

Yeah, I would personally resort to JS almost immediately for this. I saw your post last night and I thought about it off and on until this morning and I have no good ideas for doing it in the CSS layer.

Probably the kind of thing some people wouldn’t want turned on as well, so it’s a nice option to include in the plugin.

[shaneisme]

Yeah, I still have to write out the public API bit – just have the framework of that so far.

A good idea to make it an option if I resort to this.

[shaneisme]

This thread is moving more towards JS, but while I’m on the subject… is there a rock-solid way of doing something like this inside the .on() call:

if (touch-event) { // was touchstart
  foo();
else { // was click
  bar();
}

Or can I separate the listeners into click and touchstart? In my testing, I couldn’t get that working properly, but I might have missed a step somewhere.

In the script already I will detect if the OS is reporting touch capability, but this breaks in things like touch-based laptops and things that could still view the modal without going direct to YouTube.

[GSutherland]

ah that’s an interesting question. you’re kind of device sniffing based on supported events, right?

as far as i know, this guy has it about right:

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

also an interesting read i just found:

http://globalmoxie.com/blog/desktop-touch-design.shtml

i don’t have a good answer, i think in this case if i really wanted to redirect to youtube in certain cases i’d go with detecting max-device-width and let tablets view the video in the modal.

[shaneisme]

Yeah, I’d probably want tablets to go to YouTube as well… I just wish there was a good way to know. I actually wanted to default to YouTube (kinda defeats the purpose of building a modal…) and only bring up the modal on a mouse click, but I kept getting touch events bound up with clicks…

I wonder if there’s a way to test if someone has the YouTube app installed… hmm…

Also, device width would probably work out after all and just attribute a value that would work for smaller screens. This might solve my original problem anyway, I could see if the device width would break the 16/9 ratio + make sure it’s big enough.

[Shikkediel]

My idea at first was to test window height with js as well…
I don’t think you can compare a click against a touchstart because a mobile click is a touchstart (followed by a touchend). I use this for a jQuery draggable script to check (didn’t see that on the linked pages after a quick read) :

var touch = e.originalEvent.touches;
if (touch) ...

Maybe a screen size check combined with this could be an idea?
For completeness, the aformentioned script :

http://codepen.io/Shikkediel/pen/ZYbWzL?editors=011

[shaneisme]

I changed things around by selecting an arbitrary device width and height of greater than 500, we also check if the ratio will work out.

If both of those conditions are met, we show the modal, otherwise I send them to YouTube directly.

I’m still going to clean things up a bit and of course test it thoroughly… I’ll probably include the device width options in the API someday.

Edit – I’ve actually come up with a way to show the modal in most cases unless we have a small device. More tinkering is still needed, but thanks for getting my mind going on this.

[Author]

Posts