crop : The video image will be scaled up or down until it fills the requested width and height box.Requires both width and height to be set. stretch : The thumbnail will exactly fill the requested width and height, even if it distorts the image.For example if the thumbnail width is 100, the height is 100, and the video's aspect ratio is 16:9, the delivered image will be 100x56 (16:9). preserve : By default, Mux will preserve the aspect ratio of the video, while fitting the image within the requested width and height.The fit_mode parameter can have the following values: Valid values are preserve, stretch, crop, smartcrop, and pad (see below).įlip the image top-bottom after performing all other transformations.įlip the image left-right after performing all other transformations. How to fit a thumbnail within width + height. Rotate the image clockwise by the given number of degrees. Defaults to the height of the original video. The height in pixels of the thumbnail (in pixels). Defaults to the width of the original video. The width in pixels of the thumbnail (in pixels). Defaults to the middle of the original video. Images will be scaled to fit as well.The time (in seconds) of the video timeline where the image should be pulled. var el = document.querySelector('video-placeholder')īy default, elements will be styled as a 16:9 flexible box. You could listen for a video to finish playing and then close video-placeholder. Notice how first video-placeholder on this page opened? Well, unless you already opened it yourself already. To test, open your browser console and try the examples. To close it again, remove the attribute: el.removeAttribute('open')

Since this is a custom element, you can also open and close it with open web APIs: var el = document.querySelector('video-placeholder')

When opened, whatever is put inside the element will be revealed. Otherwise and by default it will be closed, meaning only the front is visible.

If an open attribute is present on the, the element is considered opened. Please check the source code here as well for examples… You can open it by clicking it or setting the attribute 'open': The element is used to hide the thing you want to reveal until the element is opened. The element is used as the placeholder's front. There's also an optional video-placeholder-fallback.js version that'll leave the embeds visible. Warning: if your browser does not support custom elements, please include a polyfill. Include the required script and css files: You can also use the keyboard to focus and press enter. This custom element for the web makes it easy to use your own placeholders while lazy-loading the 3rd-party content. Now you have a semi-good looking, and slower 1, website. Here's the story: you create a a good looking website and want to insert a few embeds from YouTube, Vimeo, anything, Bandcamp, Soundcloud, Spotify, etc, actually anything you want. Custom element Prettier embeds for flashy sites

Video placeholder image