Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sricharankrishnan/click-image-play-youtube-video

Jquery based plugin to help render and play youtube embed videos on an modal/overlay in your web apps. Responsive build.
https://github.com/sricharankrishnan/click-image-play-youtube-video

autoplay click-to-play-video click-to-play-youtube-video data-attribute-html iframe-embeds jekyll jekyll-website jquery onclick-event play-youtube-videos trigger youtube-video

Last synced: about 1 month ago
JSON representation

Jquery based plugin to help render and play youtube embed videos on an modal/overlay in your web apps. Responsive build.

Host: GitHub
URL: https://github.com/sricharankrishnan/click-image-play-youtube-video
Owner: sricharankrishnan
License: mit
Created: 2017-04-01T07:50:57.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2024-01-21T10:26:01.000Z (10 months ago)
Last Synced: 2024-09-29T03:03:21.024Z (about 2 months ago)
Topics: autoplay, click-to-play-video, click-to-play-youtube-video, data-attribute-html, iframe-embeds, jekyll, jekyll-website, jquery, onclick-event, play-youtube-videos, trigger, youtube-video
Language: SCSS
Homepage: https://sricharankrishnan.github.io/click-image-play-youtube-video/
Size: 25.7 MB
Stars: 23
Watchers: 2
Forks: 8
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md

Awesome Lists containing this project

README

# Click-Image-Play-Youtube-Video
![Version](https://img.shields.io/github/v/release/sricharankrishnan/click-image-play-youtube-video?sort=semver)
![Open Issues](https://img.shields.io/github/issues-raw/sricharankrishnan/click-image-play-youtube-video)
![Closed Issues](https://img.shields.io/github/issues-closed-raw/sricharankrishnan/click-image-play-youtube-video)
![License](https://img.shields.io/github/license/sricharankrishnan/click-image-play-youtube-video)
![Maintenance](https://img.shields.io/maintenance/yes/2024)

### About
This is a javascript/jquery plugin that can be easily integrated into your web app. The main purpose of this plugin is to provide a
simple yet effect user interface, in the form of an overlay, to help play youtube embeded videos, based on a click event. This click
event can be bound to all clickable HTML elements and is not restricted to images.

If you would like to see a Demo or visit the Webiste, click here.
Otherwise, lets get you started on the installations and downloads.

Are you looking to support projects built with React? Click Here.

### Discussions
A discussions channel has been opened up for this plugin. If you have any questions about this particular plugin, do feel free to write in and I would do my best to help you out. You can access the discussions page by clicking on the 'Discussion' tab above or go to

### Getting Started
Before you start coding, download the required files. Click here
to proceed to the section for downloading. The javascript file `youtube-overlay.js` is required. When it comes to stylesheets, you can either download the
SCSS file which is `youtube-overlay.scss` or the raw CSS file which is `youtube-overlay.css`.

I'm guessing you know how to place a script tag and a link tag referencing to the location of the above files for your web app. Once you've got your
files, lets get to work with code.

### Prerequisites
Javascript. Jquery. HTML. CSS. Sass(optional)

### Built Using
- HTML
- CSS (Sass Preprocessor)
- Jquery

### Usage
1. If you have downloaded and placed your files properly, refresh your browser and open up the console. You should be able to see the Javascript Constructor
when you type
```javascript
new YoutubeOverlayModule
```

2. The click event can be bound to any element in the html file. Although you don't need to register a click event, you would need to initialize this setup
by using the javascript constructor. Lets say you have an image:
```
Example
```

3. Placing an id for the element is important and mandatory for this to work. Please remember this. If you have multiple elements grouped similarly, I could
suggest looping them with javascript and then writing the code that helps to trigger the youtube overlay.

4. Next you've got to place the required embed code src onto the element. So, in a youtube video, click on the Share button, choose embed and copy paste the
src value. Now your image element above would look like this:
```
Example
```

5. Now write the javascript as shown below:
```javascript
var img = $("#exampleImage");
var configObject = {
sourceUrl: img.attr("data-videourl"),
triggerElement: "#" + img.attr("id"),
progressCallback: function() {
console.log("Callback Invoked.");
}
};

var videoBuild = new YoutubeOverlayModule(configObject);
```

6. After writing the code in the way shown above, you've got to deploy it into your web app (otherwise its not going to work). Use the available deployment method as shown below:
```javascript
videoBuild.activateDeployment();
```

7. You're all set and good to go! Refresh your browser and see this working. If you've been able to understand things, I'm sure you can build different patterns that suit different scenarios.
If you click on the example image that you've inserted following this documentation, things should be working fine.

### Raising Issues for the Project
I don't consider this a superhero project but as of May 2021, its nice to see some appreciation and support coming in. If you do have any issues
I'd definetly try to see what I can do help support. Please go ahead and raise a good ol' Github issue and would write back to you depending upon
how it could be resolved.

### Support
If you like this project, I would really appreciate you placing a star on the github project. This would really help encourage me to become a better developer.
Speak to your friends and colleagues about this project too if you can and seek their support.

Here is wishing you a nice day and happy coding. Cheers!