Hi Friends ,Today I will Provide you Twitter Video Player Codes and Show You how to Download and Install it on Blogger Site.

Demo Here

See the Pen Twitter Video Player Installation Blogger by K K UPGRADER (@kkupgrader) on CodePen.

👉Steps To Install

First of all ,Paste This Code just above </head> in Blogger Themes> Edit Html.


<link href="https://rawcdn.githack.com/KKUPGRADER/plyrs/47438ca160625342bdbb21c538efe29dd0379dca/plyr.css" rel="stylesheet"/>

Now Scroll to Bottom and Paste This Code Just Above </body>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://rawcdn.githack.com/KKUPGRADER/plyrs/c057c8de195f0c864365d54ac824e5123d1b237a/plyr.js"></script>

And Save Theme.
And To Embed Use Below Code.


<div class="video">
  <div class="video-preview" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHwmmAPQ6iOxN9L98tsZ6UiH0x27Lr0H_O5-vVeT_MVRe8etN2vC1hQiKTJv5Qh-dprFjhXV8vCbINrvrDGjfUjCtTO6pVC6CAxxQDRr8xhACNmn2Cfd-xnc3QUKY1-D_Ta8UdpF6u-sE/s320/thumbnail.webp);">
    <button class="video-start-btn">
      <svg height="60" viewbox="0 0 512 512" width="60" xmlns="http://www.w3.org/2000/svg">
        <path d="M256,0C114.833,0,0,114.844,0,256s114.833,256,256,256s256-114.844,256-256S397.167,0,256,0z M357.771,264.969
			l-149.333,96c-1.75,1.135-3.771,1.698-5.771,1.698c-1.75,0-3.521-0.438-5.104-1.302C194.125,359.49,192,355.906,192,352V160
			c0-3.906,2.125-7.49,5.563-9.365c3.375-1.854,7.604-1.74,10.875,0.396l149.333,96c3.042,1.958,4.896,5.344,4.896,8.969
			S360.813,263.01,357.771,264.969z">
      </path></svg>
    </button>
  </div>
  <div class="video-top"></div>
  <div class="video-loading">
    <div class="video-loading-spinner"></div>

  </div>
  <div class="video-reset">
    <button class="video-reset-btn">Watch again</button>

  </div>
  <div class="video-player-controls">
    <div class="video-slider">
      <div class="video-slider-container">
        <div class="video-slider-bg">
          <div class="video-slider-rail"></div>
          <div class="video-slider-buffer"></div>
        </div>
      </div>

    </div>
    <div class="row">
      <div class="wrap">
        <div class="video-control">
          <button class="video-control-btn">
            <svg class="video-control-play" height="24" shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor" viewbox="0 0 24 24" width="24">
              <polygon fill="currentColor" points="5 3 19 12 5 21 5 3"></polygon>
            </svg>
            <svg class="video-control-pause" height="24" shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor" viewbox="0 0 24 24" width="24">
              <rect fill="currentColor" height="16" width="4" x="6" y="4"></rect>
              <rect fill="currentColor" height="16" width="4" x="14" y="4"></rect>
            </svg>

          </button>
        </div>
        <div class="video-views">725.5K views</div>
      </div>
      <div class="wrap">
        <div class="video-counts"><span class="video-count-time">0:25</span><span class="video-count-line">/</span><span class="video-count-fulltime">0:52</span></div>
        <div class="video-voice">

          <div class="video-voice-slider">
            <div class="video-voice-slider-rail" role="slider">
              <div class="video-voice-slider-buffer"></div>
              <input class="video-voice-slider-range" max="1" type="range" value="1" />
            </div>
          </div>

          <button class="video-voice-btn">
            <svg class="video-voice-on" fill="none" height="24" shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor" viewbox="0 0 24 24" width="24">
              <path d="M11 5L6 9H2v6h4l5 4V5z"></path>
              <path d="M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07"></path>
            </svg>
            <svg class="video-voice-off" fill="none" height="24" shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor" viewbox="0 0 24 24" width="24">
              <path d="M11 5L6 9H2v6h4l5 4V5z"></path>
              <path d="M23 9l-6 6"></path>
              <path d="M17 9l6 6"></path>
            </svg>
          </button>

        </div>
        <div class="full-screen">
          <button class="full-screen-btn">
            <svg class="full-screen-open" fill="none" height="24" shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor" viewbox="0 0 24 24" width="24">
              <path d="M15 3h6v6"></path>
              <path d="M9 21H3v-6"></path>
              <path d="M21 3l-7 7"></path>
              <path d="M3 21l7-7"></path>
            </svg>

            <svg class="full-screen-exit" fill="none" height="24" shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor" viewbox="0 0 24 24" width="24">
              <path d="M4 14h6v6"></path>
              <path d="M20 10h-6V4"></path>
              <path d="M14 10l7-7"></path>
              <path d="M3 21l7-7"></path>
            </svg>

          </button>

        </div>
      </div>
    </div>
  </div>
  <div class="video-player" style="width: 100%;">
    <video allowfullscreen="false" controlslist="nodownload" data-video="" tabindex="-1">
      <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4"/>
    </video>

  </div>
  <div class="video-contextMenu">
    <button class="video-contextMenu-btn">Copy Video Adress</button>
  </div>
</div>