Preview videos

[pepegar]

Give to the user the option to preview videos, for example popping up a lightbox with the video.

[johnbillion]

@simonwheatley pointed out that we could do this in a modal window that calls the oembed endpoint for the item. That way we could add support to the core plugin for previewing for any service that supports oembed. Thoughts?

[paulgibbs]

We'd end up with a modal-in-a-modal, which makes me hesitate. I think we'd need to do some mockups/PSDs exploring this possibility and any other ideas we come up with.

[simonwheatley]

First off, I think allowing a preview before embedding is definitely worth achieving.

Perhaps the ability to “expand” one result at a time, sliding it open to give more height, and show the video playing in the midst of the other results? Not sure how this would work with the grid layout of the YT results.

[pepegar]

@simonwheatley @paulgibbs Perhaps it would be cool to trigger a countdown on the hover state of the videos and, when some time passes (0.5 - 1 secs maybe) replace the image by the embed of YouTube... But I don't know if there is possible to embed a video and play it without the interaction of the user.

[simonwheatley]

Auto play is not possible on YT without some text manipulation of the returned HTML (though that is fairly straightforward). Would the thumbs be big enough to see which video it was?

[simonwheatley]

Here's the auto play code, in case it's handy:

$html = wp_oembed_get('http://www.youtube.com/watch?v=oqMl5CRoFdk&autoplay=1#t=0m05s');
// Auto play video :D
$html = preg_replace( '/src="([^\"]+)"/i', 'src="${1}&loop=1&autoplay=1"', $html );
echo $html;

[pepegar]

Actually, I am trying it and it's possible to embed an autoplayable video just by appending "?autoplay=1" to the src attribute of the iframe.

Hope to have at least a draft by the end of today.

[pepegar]

I have done some progress in this. Actually I've commited fa38e630092fe108a0adad65a42a972a6eec294c, which doesn't instantly replaces the image by the video. Instead, it waits a second and then replaces it.

Any thoughts about it?

[mjangda]

Might be better to use some sort of click-to-preview (instead of on-hover)?

[pepegar]

Yes, It think it's better to use a click instead a hover @mjangda.

I've implemented it in e44e5cb2ae3e5a69ce6527515f08b17a2dfc5805