Add YouTube social button in header and footer (#16838)

assets/sass/_base.sass

@@ -125,7 +125,7 @@ header
   background-size: contain
   background-position: center center
   background-repeat: no-repeat
-  
+
 #blog
   &.flip-nav, &.open-nav
     .logo
@@ -490,7 +490,7 @@ footer
   display: inline-block
   background-image: url(/images/social_sprite.svg)
   background-repeat: no-repeat
-  background-size: 300px
+  background-size: 350px
   width: 50px
   height: 50px
   border-radius: 5px
@@ -549,6 +549,12 @@ a.calendar
   &:hover
     background-position: -250px 100%
 
+a.youtube
+  background-position: -300px 0
+
+  &:hover
+    background-position: -300px 100%
+
 #viewDocs
   display: none
 

assets/sass/_desktop.sass

@@ -213,7 +213,7 @@ $video-section-height: 550px
     display: inline-block
     background-image: url(../images/social_sprite.svg)
     background-repeat: no-repeat
-    background-size: 300px
+    background-size: 350px
     width: 50px
     height: 50px
     border-radius: 5px
@@ -264,6 +264,12 @@ $video-section-height: 550px
     &:hover
       background-position: -250px 100%
 
+  a.youtube
+    background-position: -300px 0
+
+    &:hover
+      background-position: -300px 100%
+
   #community, .gridPage
     #hero
       text-align: left