Giter VIP home page Giter VIP logo

Comments (10)

johnbillion avatar johnbillion commented on July 18, 2024

@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?

from media-explorer.

paulgibbs avatar paulgibbs commented on July 18, 2024

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.

from media-explorer.

simonwheatley avatar simonwheatley commented on July 18, 2024

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.

from media-explorer.

pepegar avatar pepegar commented on July 18, 2024

@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.

from media-explorer.

simonwheatley avatar simonwheatley commented on July 18, 2024

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?

from media-explorer.

simonwheatley avatar simonwheatley commented on July 18, 2024

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;

from media-explorer.

pepegar avatar pepegar commented on July 18, 2024

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.

from media-explorer.

pepegar avatar pepegar commented on July 18, 2024

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

Any thoughts about it?

from media-explorer.

mjangda avatar mjangda commented on July 18, 2024

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

from media-explorer.

pepegar avatar pepegar commented on July 18, 2024

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

I've implemented it in e44e5cb

from media-explorer.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.