h1 Pure CSS Play / Pause Video Button
p You can adjust its size with the $size variable and everything should stay relative

.c-pp
  .c-pp__icon

body {
  
    background: #ff6862;
    padding: 50px;
  
}

h1, p {

    text-align: center;
    font-weight: normal;
    letter-spacing: 0.04em;
  
}

h1 {
    
    color: tint(#ff6862, 60%);
    margin: 0 0 15px 0;
    font-size: 20px;
    
}

p {

    color: tint(#ff6862, 20%);
    margin: 0 0 50px 0;
    font-size: 16px;
  
}

// Play / Pause button.
.c-pp {

    $root: &;
    $size: 100px;
    $color: #fff;
    $trans: 0.2s ease;

    position: relative;
    width: $size; 
    height: $size;
    display: block;
    border: ($size / 30) solid $color;
    border-radius: 50%;
    padding: 0;
    margin: 0 auto;
    cursor: pointer;
    user-select: none;

    &__icon {

        // Shared styles.
        box-sizing: border-box;
        display: block;
        position: absolute;
        transition: all $trans;
        width: ($size / 4);
        height: ($size / 2);

        // Pause styles.
        transform: translateX($size / 2.6);
        top: ($size / 4);
        border-top: 0 solid transparent;
        border-right: ($size / 12) solid $color;
        border-bottom: 0 solid transparent;
        border-left: ($size / 12) solid $color;

        // Play styles.
        #{$root}.is-play & {
        
            transform: translateX($size / 2.3);
            border-top: ($size / 4) solid transparent;
            border-right: 0px solid transparent;
            border-bottom: ($size / 4) solid transparent;
            border-left: ($size / 4) solid $color;
 
        }

    }

}

(function($) {
  
  'use strict';
  
   $('.c-pp').on('click', function() {
     $(this).toggleClass('is-play');
   });
  
})(jQuery);