https://github.com/tinacious/tinaciousfluidvid

Tinacious Fluid Video is a jQuery plugin to create fluid videos for Responsive Web Design.
https://github.com/tinacious/tinaciousfluidvid

jquery responsive-videos responsive-web-design

Last synced: about 2 months ago
JSON representation

Tinacious Fluid Video is a jQuery plugin to create fluid videos for Responsive Web Design.

• Host: GitHub
• URL: https://github.com/tinacious/tinaciousfluidvid
• Owner: tinacious
• Created: 2013-01-11T20:51:07.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2020-01-12T21:43:56.000Z (about 5 years ago)
• Last Synced: 2024-04-14T23:07:36.968Z (9 months ago)
• Topics: jquery, responsive-videos, responsive-web-design
• Language: HTML
• Homepage: http://tinacious.github.io/tinaciousFluidVid/
• Size: 189 KB
• Stars: 3
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Tinacious Fluid Video jQuery Plugin

This plugin was developed to make it easy to implement a fluid video to use in Responsive Web Design.

The CSS it uses was acquired from a variety of internet resources without luck of finding an original author.

I made it easy to use. All you need to know is the video ID and whether it's a YouTube or Vimeo video.

See the demo [here](http://tinacious.github.io/tinaciousFluidVid/).

## How it Works

The plugin renders the HTML and the styles in the attached CSS file required to embed your fluid video.

The video will expand to 100% of its container.

## Instructions

1. Reference [jQuery](http://code.jquery.com/jquery.min.js)

2. Reference `tinaciousFluidVid.js` or `tinaciousFluidVid.min.js`

```html

```

### HTML

Create a blank element where you want your video to go.

```html



```

Yep, that's it. Your video will append to the targeted element.


### Javascript

Initialize your script on document ready:

```js

$(document).ready(function(){

  $('.my_video').tinaciousFluidVid({

    id: '', // Video ID goes here

    type: 'vimeo', // Video service name goes here. Currently supports YouTube and Vimeo (default: vimeo)

  });

});

```

If you do not pass variables through the function, the default video service is Vimeo and the video that will play is a screencast on creating content for a Content Management Systems. The default aspect ratio is widescreen.

Since Vimeo is the default video service, you do not need to specify that the type is Vimeo and the following is fine:

```js

$(document).ready(function(){

  $('.my_video').tinaciousFluidVid({

    id: '123456'

  });

});

```

It will play video with ID 123456 on Vimeo.

### Results

Using this jQuery:

```js

$(document).ready(function(){

  $('.my_video').tinaciousFluidVid({

    type: 'youtube',

    id: '-O3gTUTsYbU'

  });

});

```

Will render the following HTML"

```html



  


    

  



```