Simple embed responsive video(YouTube, Vimeo, Daily Motion, Coub) overlay module.
Example
https://codepen.io/mickyholbrook/pen/yLYvNEr
Installation
npm
npm i iframe-video-overlay
Load the required JS to your entry JS file:
let IFrameVideoOverlay = require('iframe-video-overlay');
or
import IFrameVideoOverlay from 'iframe-video-overlay';
Load the required stylesheet to your entry CSS file:
@import "node_modules/iframe-video-overlay/index";
Cloning git repository
1. Go to your project directory
2. git clone https://github.com/dmitriyakkerman/iframe-video-overlay.git .
Put the required stylesheet link in HEAD tag:
<link rel="stylesheet" href="./dist/css/iframe-video-overlay.min.css">
Put the script at the bottom of your markup:
<script src="./dist/js/iframe-video-overlay.min.js"></script>
Usage
Create root element, specify video ID inside "data-id" attribute.
<div class="video" data-id="lM02vNMRRB0"></div>
Youtube video ID
Vimeo video ID
Daily Motion video ID
Coub video ID
Initialization
1.Specify root element (string or DOM node) in "el" option.
2.Specify video hosting name("youtube" or "vimeo" or "dailymotion" or "coub") in "type" option.
*You can pass this option in case using youtube video(option "type" has "youtube" value by default).
3.Specify "imageSrc" if you want to overlay iframe with image.
4.Specify "iconSrc", "width", "height" and "percentage" options inside "playButton" option for play button customization.
*You can pass "width" and "height" options in case using "percentage" option(or even pass "percentage" option, by default "width" and "height" equal "10%" of root element)
document.addEventListener('DOMContentLoaded', function() {
new IFrameVideoOverlay({
el: '.video',
type: 'youtube', //or 'vimeo' or 'dailymotion' or 'coub'
imageSrc: 'video-image.jpg',
playButton: {
iconSrc: 'play-button.png',
width: '15%',
height: '15%',
//or
percentage: 20
}
})
});
Options
el
Root element for module initialization.
Type: String, Element
Required: true
type
Points of what type of the video hosting you are going to use.
Type: String
Default: youtube
Required: false
imageSrc
Background image, which covers your iframe video.
Type: String
Required: false
playButton
Play button customization property, which includes playButton.iconSrc, playButton.width, playButton.height and playButton.percentage options.
Type: Object
Required: true
playButton.iconSrc
Play button icon.
Type: String
Required: true
playButton.width
Width of play button.
Type: String(px, %, etc...)
Default: playButton.percentage or 10% of root element
Required: false
playButton.height
Height of play button.
Type: String(px, %, etc...)
Default: playButton.percentage or 10% of root element
Required: false
playButton.percentage
Width and height of play button in percentage.
Type: Number
Default: 10% of root element
Required: false