<a id="gh" href="https://github.com/ritz078/embed.js"><i class="fa fa-github"></i></a>
<button id="btn" onclick="embed()">Apply embed.js</button>

<div id="rawText">
This is the blog we al know and :heart:. Url will become clickable like this http://daily-javascript.com.
youtube videos. https://www.youtube.com/watch?v=bQRLVxZHKPs
and embed codepen's like so: https://codepen.io/ThePizzaMan/pen/YwPOVd
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto);

body{
  font-family:'Roboto'
}

#rawText{
  width: 800px;
  margin: 0 auto;
  padding: 20px 0;
}

a{
  text-decoration:none;
  color:blue
}

button{
    padding: 10px 20px;
  font-size: 16px;
  border-radius: 2px;
  cursor: inherit;
  border: 0;
  color: #fff;
  width: 150px;
  outline: 0;
  font-family: inherit;
  transition: background-color .2s ease-in-out;
    background-color: #306199;
  margin: 0 auto;
  display:block;
  margin-top: 30px;
  cursor:pointer;
}

.fa-github{
  font-size:40px !important;
  margin: 10px auto;
  display:table
}

#gh{
  color:#000;
}

#gh:hover{
  color:#555;
}
.ejs-video-preview{
  border: 1px solid #e4e4e4;
}
function embed() {
    var x = new EmbedJS({
      element:document.getElementById('rawText'),
      googleAuthKey: 'AIzaSyCqFouT8h5DKAbxlrTZmjXEmNBjC69f0ts',
      videoWidth: 800,
      tweetOptions: {
        hideMedia:true
      },
      codeEmbedHeight:600
    });
  
  x.render();
  };
 

External CSS

  1. https://rawgit.com/ritz078/embed.js/es6/dist/embed.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/github.min.css
  3. //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css

External JavaScript

  1. https://platform.twitter.com/widgets.js
  2. https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js
  3. https://rawgit.com/ritz078/embed.js/es6/dist/embed.min.js