JSFiddle - React, Tailwind, and code Playground

by Bertrand Martel

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="watch_later">
  <div id="buttons">
    <label>Enter Video ID you want to add to Watch Later playlist :
      <input id="video-id" value='T4ZE2KtoFzs' type="text" />
    </label>
  </div>
  <div class="like">
    <a id="fb-link">
      <span class="btn-tech fa-stack fa-3x">
                  <i class="fa fa-thumbs-up fa-stack-1x"></i>
                </span>
    </a>
  </div>
  <div id="playlist-container">
    <span id="status"></span>
  </div>
  <p>
    <a href="https://www.youtube.com/playlist?list=WL">check your watch later playlist</a>
  </p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
  var OAUTH2_CLIENT_ID = '28993181493-c9o6hdll3di0ssvebfd4atf13edqfu9g.apps.googleusercontent.com';
  var OAUTH2_SCOPES = [
    'https://www.googleapis.com/auth/youtube'
  ];
  var init = false;
  googleApiClientReady = function() {
    gapi.auth.init(function() {
      window.setTimeout(checkAuth, 1);
    });
  }

  function checkAuth() {
    gapi.auth.authorize({
      client_id: OAUTH2_CLIENT_ID,
      scope: OAUTH2_SCOPES,
      immediate: true
    }, handleAuthResult);
  }
  // Handle the result of a gapi.auth.authorize() call.
  function handleAuthResult(authResult) {

    $('.like').off('click');
    $('.like').click(function(e) {
      if (authResult && !authResult.error) {
        addVideoToPlaylist();
      } else {
        init = true;
        gapi.auth.authorize({
          client_id: OAUTH2_CLIENT_ID,
          scope: OAUTH2_SCOPES,
          immediate: false
        }, handleAuthResult);
      }
      return false;
    });

    if (authResult && !authResult.error) {
      // Authorization was successful. Hide authorization prompts and show
      // content that should be visible after authorization succeeds.
      $('.pre-auth').hide();
      $('.post-auth').show();
     ...

CSS

.btn-tech {
  color: #2c3e50;
  border: solid 2px #2c3e50;
  background: transparent;
  transition: all 0.3s ease-in-out;
  margin: 20px;
  border-radius: 20% 20% 20% 20%;
}

.btn-tech:hover,
.btn-tech:active,
.btn-tech.active {
  color: #FFFFFF;
  background: #2c3e50;
  cursor: pointer;
}