Media-Card-Web-Component
Media-Card-Web-Component copied to clipboard
MarketingPipeline
A web component to display books, movies, TV shows & song details on any website
Media-Card-Web-Component
Display details about movies, tv shows, books & songs on any website!
Show your support!
A custom web element to show / fetch details about movies, TV shows, books & songs on any website!
Example and usage
You can view a demo of this Web Component in use here.
How to use Media Card:
How to show a Book:
Usage
<media-card book="Animal Farm"></media-card>
include this script at in your HTML document.
<script src="https://cdn.jsdelivr.net/gh/MarketingPipeline/[email protected]/dist/media-card-wc.min.js" type="module"></script>
Note: You can show as books as you want! You can also use a author attribute for a more accurate result.
How to show a Movie:
Usage
<media-card name="The Mask (1994)"></media-card>
Note: For movies & TV show a API Key is required from TheMovieDB, songs do NOT require a API key.
After getting your API key (if required) place it in your HTML document like so
<script>
var TheMovieDB_APIKey = "YOUR API KEY HERE"
</scrip>
include this script at the bottom of your HTML document.
<script src="https://cdn.jsdelivr.net/gh/MarketingPipeline/[email protected]/dist/media-card-wc.min.js" type="module"></script>
Note: You can show as many movies as you want!
How to show a TV Show:
Usage
<media-card name="The Twilight Zone (1959)" type="TV"></media-card>
Note: To display TV show(s) - you will require a API key from TheMovieDB.
After getting your API key place it in your HTML document like so
<script>
var TheMovieDB_APIKey = "YOUR API KEY HERE"
</scrip>
include this script at the bottom of your HTML document.
<script src="https://cdn.jsdelivr.net/gh/MarketingPipeline/[email protected]/dist/media-card-wc.min.js" type="module"></script>
Note: You can show as many TV show's as you want
How to show a Song:
Usage
<media-card name="The Beatles In My Life" type="song"></media-card>
Note: You do NOT need a API key to display songs.
include this script at the bottom of your HTML document.
<script src="https://cdn.jsdelivr.net/gh/MarketingPipeline/[email protected]/dist/media-card-wc.min.js" type="module"></script>
Note: You show as many song's as you want
Options
| Attribute | Meaning | Default | Required |
|---|---|---|---|
| name | The movie, TV show or song name you would like to show | undefined |
Yes |
| type | Type of Media to show details for - options:TV, Song, Book, by default movie type will be shown. |
Movie |
No |
| theme | Set a different color theme - options dark |
light |
No |
Contributing 
Want to improve this project? Create a pull request with detailed changes / improvements! If approved you will be added to the list of contributors of this awesome project!
See also the list of contributors who participate in this project.
License 
This project is licensed under the GPL-3.0 License - see the LICENSE.md file for details.
Metadata
Owner
MarketingPipeline
Metadata
A web component to display books, movies, TV shows & song details on any website