I have 6 SVG’s that are the same here, how would I reduce that to using only 1?
Is there a way for me to do this?
https://jsfiddle.net/fj2un3ac/5/
<div class="outer">
<div class="tcell">
<div class="container-left">
<div class=" wraph">
<ul class="nav">
<li>
<svg class="alpha" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="hide">
<div class="video playinga" data-id="ZPz3wzPlruA"></div>
</div>
</li>
<li>
<svg class="beta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="hide">
<div class="video playingb" data-id="VFMtNOxpV3o"></div>
</div>
</li>
<li>
<svg class="gamma" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="hide">
<div class="video playingc" data-id="Zkf4EDjV1_g"></div>
</div>
</li>
<li>
<svg class="delta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="hide">
<div class="video playingd" data-id="-Xgi_way56U"></div>
</div>
</li>
<li>
<svg class="epsilon" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="hide">
<div class="video playinge" data-id="EK3h0IADYrQ"></div>
</div>
</li>
<li>
<svg class="zeta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="hide">
<div class="video playingf" data-id="YOw9J4K02H4"></div>
</div>
</li>
<li>
<svg class="eta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="hide">
<div class="video playingg" data-id="ID856YDIb6A"></div>
</div>
</li>
<li>
<svg class="theta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="hide">
<div class="video playingh" data-id="9Gn8ymkrlbI"></div>
</div>
</li>
<li>
<svg class="iota" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="hide">
<div class="video playingi" data-id="qYEooPeyz5M"></div>
</div>
</li>
</ul>
<div class="linesa"></div>
<div class="linesb"></div>
</div>
</div>
</div>
</div>