Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dmitriyakkerman/iframe-video-overlay
Embedded responsive video overlay module (YouTube, Vimeo, Daily Motion, Coub).
https://github.com/dmitriyakkerman/iframe-video-overlay
embed-videos iframe iframe-overlay video-overlay vimeo youtube
Last synced: 12 days ago
JSON representation
Embedded responsive video overlay module (YouTube, Vimeo, Daily Motion, Coub).
- Host: GitHub
- URL: https://github.com/dmitriyakkerman/iframe-video-overlay
- Owner: dmitriyakkerman
- Created: 2020-05-05T07:38:34.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T08:07:34.000Z (almost 2 years ago)
- Last Synced: 2024-10-15T22:33:42.686Z (23 days ago)
- Topics: embed-videos, iframe, iframe-overlay, video-overlay, vimeo, youtube
- Language: JavaScript
- Homepage:
- Size: 4.98 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Embedded responsive video overlay module (YouTube, Vimeo, Daily Motion, Coub).
**Example**
https://codepen.io/mickyholbrook/pen/yLYvNEr
------
**Installation**
**npm**
npm i iframe-video-overlay
Load the required JS to your entry JS file:
```js
let IFrameVideoOverlay = require('iframe-video-overlay');
or
import IFrameVideoOverlay from 'iframe-video-overlay';
```
Load the required stylesheet to your entry CSS file:
```css
@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:
```html
```
Put the script at the bottom of your markup:
```html
```
------
**Usage**
Create root element, specify video ID inside "data-id" attribute.
```html
```
_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)_
```js
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