search

vlitejs / vlite

🦋 vLitejs is a fast and lightweight Javascript library for customizing video and audio player in Javascript with a minimalist theme (HTML5, Youtube, Vimeo, Dailymotion)
https://vlite.js.org
MIT License
268 stars 18 forks source link

Retain initial element classes #45

Closed dy closed 3 years ago

dy commented 3 years ago

I expected

<div id="player" class="vlite-js player" data-youtube-id="{{ page.video }}"></div>

to keep the .player class and just insert content. But it seems to be replaced with new element, anyways class gets lost.

I need to limit video height to 50vh for wide screens. What's the best way to accomplish that? Wrapping into a container doesn't seem to help.

dy commented 3 years ago

Answering my question. To limit height:

.v-vlite.v-video {
    padding-top: min(56.25%, 61.8vh);
}
dy commented 3 years ago

@yoriiis is it worth retaining initial container element and it's classes?

yoriiis commented 3 years ago

@dy The element is automatically replaced with an iframe only when the provider's APIs are used (Youtube and Vimeo), this is normal behavior as specified in the YouTube documentation. It's quite specific and there are no plans to handle this.

dy commented 3 years ago

Right, but I rather meant retaining container classes provided by user

yoriiis commented 3 years ago

In fact, the element is not a container, it is a placeholder for the iframe. You can add the classes on a parent element if necessary, which will not be altered. This would require managing attributes (classes, identifiers, style, etc.) and rewriting them on the iframe, complicated for a fairly specific need.