Youtube Template.html

<raw-code><a href="[LINK TO VID IF ANY" style="display: block"><div style="max-width: 960px; width: 100%; padding-top: 56.25%; position: relative; background-image: url(https://images.unsplash.com/photo-1579172687140-d10521a3e075?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ); background-size: cover">
  <div style="position: absolute; bottom: 0; left: 0; width: 100%; height: 10%; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0, .75)); z-index: 0;"></div>
  <div style="height: 3px; width: calc(100% - 20px); background-color: rgba(255,255,255,.5); z-index: 1; margin-left: 10px;">
    <div style="height: 3px; width: 10%; background-color: red; z-index: 1;"></div>
  </div>
  <div style="display: flex;">
    <div style="display: flex; align-items: center; width: 50%;">
      <svg height="100%" version="1.1" viewBox="0 0 36 36" width="36px"><use class="ytp-svg-shadow" xlink:href="#ytp-id-43"></use><path fill="white" d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" id="ytp-id-43"></path></svg>
      <svg height="100%" version="1.1" viewBox="0 0 36 36" width="36px"><use class="ytp-svg-shadow" xlink:href="#ytp-id-15"></use><path fill="white" class="ytp-svg-fill" d="M 12,24 20.5,18 12,12 V 24 z M 22,12 v 12 h 2 V 12 h -2 z" id="ytp-id-15"></path></svg>
      <svg height="100%" version="1.1" viewBox="0 0 36 36" width="36px"><use class="ytp-svg-shadow" xlink:href="#ytp-id-17"></use><use class="ytp-svg-shadow" xlink:href="#ytp-id-18"></use><defs><clipPath id="ytp-svg-volume-animation-mask"><path d="m 14.35,-0.14 -5.86,5.86 20.73,20.78 5.86,-5.91 z"></path><path d="M 7.07,6.87 -1.11,15.33 19.61,36.11 27.80,27.60 z"></path><path class="ytp-svg-volume-animation-mover" d="M 9.09,5.20 6.47,7.88 26.82,28.77 29.66,25.99 z" transform="translate(0, 0)"></path></clipPath><clipPath id="ytp-svg-volume-animation-slash-mask"><path class="ytp-svg-volume-animation-mover" d="m -11.45,-15.55 -4.44,4.51 20.45,20.94 4.55,-4.66 z" transform="translate(0, 0)"></path></clipPath></defs><path class="ytp-svg-fill ytp-svg-volume-animation-speaker" clip-path="url(#ytp-svg-volume-animation-mask)" d="M8,21 L12,21 L17,26 L17,10 L12,15 L8,15 L8,21 Z M19,14 L19,22 C20.48,21.32 21.5,19.77 21.5,18 C21.5,16.26 20.48,14.74 19,14 ZM19,11.29 C21.89,12.15 24,14.83 24,18 C24,21.17 21.89,23.85 19,24.71 L19,26.77 C23.01,25.86 26,22.28 26,18 C26,13.72 23.01,10.14 19,9.23 L19,11.29 Z" fill="#fff" id="ytp-id-17"></path><path class="ytp-svg-fill ytp-svg-volume-animation-hider" clip-path="url(#ytp-svg-volume-animation-slash-mask)" d="M 9.25,9 7.98,10.27 24.71,27 l 1.27,-1.27 Z" fill="#fff" id="ytp-id-18" style="display: none;"></path></svg>
      <span style="color: white; text-shadow: 1px 1px 1px rgba(0,0,0,.5); font-family: 'Roboto', Arial, sans-serif; font-size: 14px; padding-left: 5px;">0:00 / 3:00</span>
    </div>
    <div style="display: flex; align-items: center; width: 50%; justify-content: flex-end;">
      <svg height="100%" version="1.1" viewBox="0 0 36 36" width="36px"><use class="ytp-svg-shadow" xlink:href="#ytp-id-21"></use><path d="m 23.94,18.78 c .03,-0.25 .05,-0.51 .05,-0.78 0,-0.27 -0.02,-0.52 -0.05,-0.78 l 1.68,-1.32 c .15,-0.12 .19,-0.33 .09,-0.51 l -1.6,-2.76 c -0.09,-0.17 -0.31,-0.24 -0.48,-0.17 l -1.99,.8 c -0.41,-0.32 -0.86,-0.58 -1.35,-0.78 l -0.30,-2.12 c -0.02,-0.19 -0.19,-0.33 -0.39,-0.33 l -3.2,0 c -0.2,0 -0.36,.14 -0.39,.33 l -0.30,2.12 c -0.48,.2 -0.93,.47 -1.35,.78 l -1.99,-0.8 c -0.18,-0.07 -0.39,0 -0.48,.17 l -1.6,2.76 c -0.10,.17 -0.05,.39 .09,.51 l 1.68,1.32 c -0.03,.25 -0.05,.52 -0.05,.78 0,.26 .02,.52 .05,.78 l -1.68,1.32 c -0.15,.12 -0.19,.33 -0.09,.51 l 1.6,2.76 c .09,.17 .31,.24 .48,.17 l 1.99,-0.8 c .41,.32 .86,.58 1.35,.78 l .30,2.12 c .02,.19 .19,.33 .39,.33 l 3.2,0 c .2,0 .36,-0.14 .39,-0.33 l .30,-2.12 c .48,-0.2 .93,-0.47 1.35,-0.78 l 1.99,.8 c .18,.07 .39,0 .48,-0.17 l 1.6,-2.76 c .09,-0.17 .05,-0.39 -0.09,-0.51 l -1.68,-1.32 0,0 z m -5.94,2.01 c -1.54,0 -2.8,-1.25 -2.8,-2.8 0,-1.54 1.25,-2.8 2.8,-2.8 1.54,0 2.8,1.25 2.8,2.8 0,1.54 -1.25,2.8 -2.8,2.8 l 0,0 z" fill="#fff" id="ytp-id-21"></path></svg>
      <svg height="100%" version="1.1" viewBox="0 0 36 36" width="36px"><use class="ytp-svg-shadow" xlink:href="#ytp-id-23"></use><path d="M25,17 L17,17 L17,23 L25,23 L25,17 L25,17 Z M29,25 L29,10.98 C29,9.88 28.1,9 27,9 L9,9 C7.9,9 7,9.88 7,10.98 L7,25 C7,26.1 7.9,27 9,27 L27,27 C28.1,27 29,26.1 29,25 L29,25 Z M27,25.02 L9,25.02 L9,10.97 L27,10.97 L27,25.02 L27,25.02 Z" fill="#fff" id="ytp-id-23"></path></svg>
      <svg height="100%" version="1.1" viewBox="0 0 36 36" width="36px"><use class="ytp-svg-shadow" xlink:href="#ytp-id-25"></use><path d="m 28,11 0,14 -20,0 0,-14 z m -18,2 16,0 0,10 -16,0 0,-10 z" fill="#fff" fill-rule="evenodd" id="ytp-id-25"></path></svg>
      <svg height="100%" version="1.1" viewBox="0 0 36 36" width="36px"><g class="ytp-fullscreen-button-corner-0"><use class="ytp-svg-shadow" xlink:href="#ytp-id-27"></use><path class="ytp-svg-fill" fill="white" d="m 10,16 2,0 0,-4 4,0 0,-2 L 10,10 l 0,6 0,0 z" id="ytp-id-27"></path></g><g class="ytp-fullscreen-button-corner-1"><use class="ytp-svg-shadow" xlink:href="#ytp-id-28"></use><path fill="white" class="ytp-svg-fill" d="m 20,10 0,2 4,0 0,4 2,0 L 26,10 l -6,0 0,0 z" id="ytp-id-28"></path></g><g class="ytp-fullscreen-button-corner-2"><use class="ytp-svg-shadow" xlink:href="#ytp-id-29"></use><path class="ytp-svg-fill" fill="white" d="m 24,24 -4,0 0,2 L 26,26 l 0,-6 -2,0 0,4 0,0 z" id="ytp-id-29"></path></g><g class="ytp-fullscreen-button-corner-3"><use class="ytp-svg-shadow" xlink:href="#ytp-id-30"></use><path fill="white" class="ytp-svg-fill" d="M 12,20 10,20 10,26 l 6,0 0,-2 -4,0 0,-4 0,0 z" id="ytp-id-30"></path></g></svg>
    </div>
  </div>
</div>
</a>
<div style="font-family: 'Roboto', Arial, sans-serif; margin-top: 20px; display: flex; align-items: flex-end; justify-content: space-between; max-width: 960px; border-bottom: 1px #E0E0E0 solid; padding-bottom: 20px;">
  <div>
    <div style="font-size: 18px;">TITLE</div>
    <div style="color: #606060; font-size: 14px;">1 view &bull; Day 201</div>
  </div>
  <div style="display: flex">
    <form method="post" action="[POST URL]?mode=reply" style="margin:0 10px 0 0;padding:5px 0;">
<textarea name="body" style="display:none;">&lt;span style=&quot;font-size: 14px; margin: 5px 0;&quot;&gt;&lt;b&gt;[USERNAME]&lt;/b&gt; liked this video&lt;/span&gt;</textarea>
<button style="padding: 0; appearance: none; border: none; background-image: none; background-color: transparent; text-transform: uppercase; font-size: 13px; text-transform: uppercase; font-weight: bold; white-space: nowrap; display: flex; align-items: center; color: gray;"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 24px; padding-right: 10px;"><g>
        <path fill="gray" d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z" class="style-scope yt-icon"></path>
      </g></svg> Like</button>
</form>
    <form method="post" action="[POST URL]?mode=reply" style="margin:0 10px 0;padding:5px 0;">
<textarea name="body" style="display:none;">&lt;span style=&quot;font-size: 14px; margin: 5px 0;&quot;&gt;&lt;b&gt;[USERNAME]&lt;/b&gt; disliked this video&lt;/span&gt;</textarea>
<button style="padding: 0; appearance: none; border: none; background-image: none; background-color: transparent; text-transform: uppercase; font-size: 13px; text-transform: uppercase; font-weight: bold; white-space: nowrap; display: flex; align-items: center; color: gray;"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 24px; padding-right: 10px;"><g>
        <path fill="gray" d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z" class="style-scope yt-icon"></path>
      </g></svg> Dislike</button>
</form>
  </div>
</div>
<div style="font-family: 'Roboto', Arial, sans-serif; padding-top: 20px;">
  <div style="display: flex; font-size: 14px;">
    <img src="[ICON URL]" style="width: 50px; height: 50px; border-radius: 100%; min-width: 50px;" />
    <div style="padding-left: 20px;">
      <b>[YOUR NAME]</b><br />
      <span style="color: gray; font-size: 13px;">3 Subscribers</span><br />
      <div><p>[DESCRIPTION GOES HERE]</p>
      </div>
    </div>
    <div style="padding-left: 20px">
      <form method="post" action="[POST URL]?mode=reply" style="margin:0 10px 0 0;padding:5px 0;">
<textarea name="body" style="display:none;">&lt;span style=&quot;font-size: 14px; margin: 5px 0;&quot;&gt;&lt;b&gt;[USERNAME]&lt;/b&gt; subscribed to this channel.&lt;/span&gt;</textarea>
<button style="padding: 0; appearance: none; border: none; background-image: none; text-transform: uppercase; font-size: 13px; text-transform: uppercase; font-weight: bold; white-space: nowrap; display: flex; align-items: center; color: white; background-color: rgb(204, 0, 0); border-radius: 2px; padding: 10px 16px;">Subscribe</button>
</form>
    </div>
  </div>
</div></raw-code>