Vue.js embed video Welcome widget and Configurator for its customization Visit site

Vue.js
Html5 Video
Canvas
Web Share API

Responsive embeddable Video Widget for presenting a product or service on your website.

This widget can be used as an additional marketing tool on any website. To watch videos just click on the preview window (bottom right of the screen).

The widget is installed by pasting the code into the page. To generate the code, you need to pre-configure the widget. In the configurator, you can add your own videos (up to 8 clips), customize the appearance of the widget:

shape (circle / square),
position (left / right),
preview window size,
frame color,
font, size, weight and color.

Each video has the ability to add link buttons to landing web pages and social media pages.

It is recommended to make the main (first) video in a vertical format for optimal display of the widget on both computers and smartphones. Subsequent rollers will be adapted to the width of the main one. In the demo example, the videos were filmed on a Samsung phone.

In the settings it is possible to position and rescale the main video in the preview window of the widget, as well as to overlay the caption and determine its location within the preview block.

The window for viewing videos opens by clicking on the preview at the height of the screen with indents on the computer and without indents on the phone. It is equipped with a progress bar and buttons: Close, Play / Pause, Mute, navigation buttons (if there are more than 1 videos), and Share in social networks or instant messengers.

Final code example

										<vue-widget src="https://make-website.ru/video-widget/video-widjet-4.mp4" mainvideo="18,14,0.6" shape="circle,200" position="right" colors="#696E7D,#D27804" caption="Узнай, как получить скидку! &#128293;" captionpos="0,65" captionfont="Arial,18,normal,#D27804" linksname="Friday discount" linksurl="http://yg-garments.ru/models/majka-toledo.html"></vue-widget>
<script src="https://make-website.ru/video-widget/app.js"></script>

You can test this demo right now by pasting the code into your website page.

Technologies and plugins used:

Html5 Video (working with events in video media objects)
Canvas (get a screenshot of the video to insert into the background)
Web Share API (for the ability to share the page on smartphones)
Vue-custom-element (wrapper Vue components for use in HTML)
Goodshare.js (share buttons)

Links

Project address: Video Widget and Configurator

View all folders and files

Here below is just the script file:

app.js

										const bodyTag = document.querySelector('body');
.  .  .

// Insert script!