liqvidjs / liqvid

Library for interactive videos in React
https://liqvidjs.org
MIT License
754 stars 39 forks source link

How to deploy to a static site? #21

Closed GilbertMizrahi closed 2 years ago

GilbertMizrahi commented 2 years ago

If I use create-react-app I use npm build, but in this case, how do I do it? If I don't need to record audio, do I still need install Express?

ysulyma commented 2 years ago

No, you don't need to install Express.

I'm working on a liqvid build command. For now, upload bundle.js, index.html, and style.css (+ any other static files) to wherever you want on your server. Then embed it from an iframe like so:

<div class="video-container">
  <div class="aspect-ratio">
    <iframe allowfullscreen src="./my-video/"></iframe>
  </div>
</div>

with CSS

.video-container {
  margin: 0 auto;
  width: 100%;
}

.aspect-ratio {
  padding-bottom: 62.5%; /* 16 / 10 aspect ratio */
  position: relative;
}

.aspect-ratio > iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

If you don't need to support old versions of iOS (< 15), you can make this a lot simpler:

<iframe allowfullscreen src="./my-video/"></iframe>
iframe {
  aspect-ratio: 16 / 10;
}

I'd love to see what you made!