search

m90 / seeThru

HTML5 video with alpha channel transparencies
MIT License
476 stars 68 forks source link

How to display / hide video for responsive web #57

Closed xyzajacf closed 5 years ago

xyzajacf commented 5 years ago

Hey Frederik,

is it possible to display: none; / display: block; so I can control which video version to display on different media sizes?

m90 commented 5 years ago

As seeThru hides the video sources by default and uses a canvas element to display the content you cannot use media queries or similar on the <video> element itself.

You could of course still either target a wrapping element (which seeThru will inject the content into) like:

<div class="for-mobile">
<!-- video for mobile goes here -->
</div>
<div class="for-desktop">
<!-- video for desktop goes here -->
</div>

and then hide/show .for-mobile and .for-desktop as needed. This would probably require you to prevent the browser from downloading unnecessary sources in some way.

Another possibilty would be using the namespace option: https://github.com/m90/seeThru#options and then passing different values when creating the seeThru instances:

seeThru.create('video#for-mobile', {namespace: 'for-mobile'});
seeThru.create('video#for-desktop', {namespace: 'for-desktop'});

This would make seeThru apply classes named for-mobile-display and for-desktop-display to the canvas elements that display the content. You could then target these classes in CSS media queries to hide / show when needed. Again this might download both sources in some scenarios so some workaround might be needed.

m90 commented 5 years ago

Closing this for inactivity, if you need further help, feel free to reopen.