jQuery Plugin For Easy Youtube Video Embedding – EasyEmbed

jQuery Plugin For Easy Youtube Video Embedding – EasyEmbed

Welcome books I am back with a metal block tutorials Windows tutorial I will be telling you that how to embed YouTube videos into your website using a jQuery plugin called as Easy Embed so easy embed allows you to embed your YouTube videos onto your website very easy it contains various methods properties that you can use to embed videos the demo of this application is given below you can check the demo and also all the source code of this application is also given in the description.

 

Demo of this Plugin

 

 

How to use it:

1. Add the jquery.easyembed.js script to the web page, after you’ve added jQuery library.

 

2. Embed an Youtube video with a thumbnail fallback into your webpage using html5 data-* attributes.

<div data-easy-embed></div>

 

3. You can also create an overlay for the video player.

<div data-easy-embed>
  <div class="overlay">PLAY</div>
</div>

 

4. All data-* attributes.

  • data-easy-embed: auto initialize the plugin.
  • data-id: specify the Youtube Video ID.
  • data-control: true or false. Show player controls
  • data-info: true or false. Show video title and player actions

 

Download Project

 

READ  Build a Stock HD Photo Finder App in Javascript

Source Code Example

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>EasyEmbed</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Arvo" rel="stylesheet" type="text/css">
    <script src="jquery.easyembed.js"></script>

    <style>
        html {
            font-size: 16px;
        }
        body {
            background-color: #f5f7fa;
            font: 100%/1.618 "Open Sans", "Helvetic Neue", Helvetica, Arial, sans-serif;
            text-align: center;
            color: #434a54;
        }
        h1 {
            font-family: "Arvo";
            font-size: 4rem;
            text-shadow: #ffffff 0px 1px 0px;
            color: #8A66BB;
        }
        h2 {
            font-family: "Arvo";
            font-size: 2rem;
            text-shadow: #ffffff 0px 1px 0px;
        }
        a {
            color: inherit;
            text-decoration: none;
        }
        a:hover {
            color: #8A66BB;
        }
        main {
            max-width: 960px;
            margin: 0 auto;
        }
        main > div > section {
            width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
        }
        /* OVERLAY */
        .overlay {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, .5);
            cursor: pointer;
        }
        .play {
            width: 65px;
            height: 65px;
            margin: auto;
            position: absolute;
            top: 0;right: 0;bottom: 0;left: 0;
            border-radius: 100%;
            transition: all 0.5s ease;
            cursor: pointer;
            border: 5px solid #ffffff;
            box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.5);
            background: linear-gradient(135deg, #8A66BB 0%, #5B3F80 100%);
        }
        .play:hover {
            background: linear-gradient(135deg, #5B3F80 0%, #8A66BB 100%);
        }
        .arrow {
            width: 0;
            height: 0;
            margin: auto;
            position: absolute;
            top: 0;right: -4px;bottom: 0;left: 0;
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            border-left: 16px solid #ffffff;
        }
    </style>
</head>
<body>

<main>
    <h1>Easy Embed</h1>

    <h2><a href="https://github.com/RHNorskov/EasyEmbed" target="_blank">GITHUB</a></h2>

    <section>
        <div data-easy-embed="youtube:Q5691RGDUJ4">
            <div class="overlay">
                <div class="play">
                    <div class="arrow"></div>
                </div>
            </div>
        </div>
    </section>
</main>

</body>
</html>

Leave a Reply

Close Menu