Aquí les presento mi solución:

HTML

1<div class="youtube">
2 <div class="play"></div>
3</div>

---

CSS

En la solución se usan variables para calcular los demás valores automáticamente, por lo tanto se puede ingresar tan solo el ancho deseado del logo en la variable --ancho y tanto el alto como la figura de Play y los bordes-radius se calcularán automáticamente.

1*{
2 box-sizing: border-box;
3}
4
5:root{
6 --ancho: 500px; /* Ingresar un ancho y lo demas se autocalculará */  
7 --alto: calc(var(--ancho) / 1.46); /* Alto del logo */
8 --ancho-p: calc(var(--ancho) / 3.9); /* Ancho del Play */
9 --alto-p: calc(var(--alto) / 2.3); /* Alto del Play*/
10 --med-alto-p: calc(var(--alto-p) / 2); /* Mitad de la altura de Play */
11}
12
13.youtube {
14 --brx: 15%; /* Border radius X */
15 --bry: 30%; /* Border radius Y */
16 background: red;
17 padding-top: 0.1px; /* Evitar solapado de margenes verticales */
18 margin: 100px auto;
19 width: var(--ancho);
20 height: var(--alto);
21 position: relative; /* Usado para el centrado vertical del elemento Play */
22 border-radius: var(--brx) / var(--bry);
23}
24
25.play {
26 color: transparent; /* Los bordes heredan este color por defecto */
27 margin: auto; /* Centrado horizontal */
28 position: absolute;     /* Usado para el centrado vertical */
29 top: 0; left: 0; bottom: 0; right: 0; /* Usado para el centrado vertical */
30 width: var(--ancho-p);
31 height: var(--alto-p);
32 border-style: solid;
33 border-left-color: white;
34 border-width: var(--med-alto-p) 0 var(--med-alto-p) var(--ancho-p); 
35}

Seguimos aprendiendo. JL