KinoPlayer.top

Атрибут data-btn-svg-base64 позволяет заменить иконки меню выбора плееров для воспроизведения онлайн, принимает значения «имя балансера : SVG в base64», можно указать несколько значений через запятую.

Для примера будем менять иконку трейлера. 

Для создания SVG иконки воспользуйтесь любым онлайн инструментом, например посмотрите тут. После того как Вы нарисуете то что вам нужно, смотрим исходный код и кодируем его в строку base64 также любим инструментом, например здесь.

Для данного примера мы нарисовали вот такую иконку:

Ее исходный код:

<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">

 <g>
  <title>background</title>
  <rect fill="none" id="canvas_background" height="514" width="514" y="-1" x="-1"/>
 </g>
 <g>
  <title>Layer 1</title>
  <g stroke="null" id="style_2_copy_3">
   <g stroke="null" id="Shopping_10_13_">
    <g stroke="null" id="svg_1">
     <g stroke="null" id="svg_2">
      <g stroke="null" id="svg_3">
       <path stroke="null" id="svg_4" fill="#FFFFFF" d="m256,487.5c-130.60884,0 -236.85938,-104.295 -236.85938,-232.5s106.25053,-232.5 236.85938,-232.5s236.85938,104.295 236.85938,232.5s-106.25053,232.5 -236.85938,232.5z"/>
      </g>
      <g stroke="null" id="svg_5">
       <g stroke="null" id="svg_6">
        <path stroke="null" id="svg_7" fill="#149b55" d="m256,30c126.39122,0 229.21875,100.935 229.21875,225s-102.82753,225 -229.21875,225s-229.21875,-100.935 -229.21875,-225s102.82753,-225 229.21875,-225m0,-15c-135.04041,0 -244.5,107.445 -244.5,240s109.45959,240 244.5,240s244.5,-107.445 244.5,-240s-109.45959,-240 -244.5,-240l0,0z"/>
       </g>
      </g>
     </g>
     <g stroke="null" id="svg_8">
      <g stroke="null" id="svg_11">
       <g stroke="null" id="svg_12">
        <path stroke="null" id="svg_13" fill="#DBDBDB" d="m256,60.105c109.49016,0 198.54928,87.435 198.54928,194.895s-89.07441,194.895 -198.54928,194.895s-198.54928,-87.435 -198.54928,-194.895s89.05913,-194.895 198.54928,-194.895m0,-7.5c-113.89116,0 -206.18991,90.6 -206.18991,202.395s92.29875,202.395 206.18991,202.395s206.18991,-90.615 206.18991,-202.395s-92.31403,-202.395 -206.18991,-202.395l0,0z"/>
       </g>
      </g>
     </g>
    </g>
   </g>
   <g stroke="null" id="svg_14">
    <path stroke="null" id="svg_15" fill="#00bf5f" d="m386.10456,199.425c0,0 -2.58253,-19.17 -10.54406,-27.615c-10.10091,-11.07 -21.40903,-11.13 -26.60466,-11.76c-37.164,-2.82 -92.89471,-2.82 -92.89471,-2.82l-0.12226,0c0,0 -55.73071,0 -92.89471,2.82c-5.18035,0.63 -16.48847,0.69 -26.60466,11.76c-7.94625,8.445 -10.54406,27.615 -10.54406,27.615s-2.65894,22.5 -2.65894,44.985l0,21.09c0,22.515 2.65894,45 2.65894,45s2.58253,19.17 10.54406,27.585c10.11619,11.07 23.36503,10.725 29.27888,11.88c21.24093,2.145 90.28162,2.805 90.28162,2.805s55.79184,-0.09 92.95584,-2.895c5.18035,-0.66 16.50375,-0.72 26.60466,-11.775c7.94625,-8.43 10.54406,-27.585 10.54406,-27.585s2.65894,-22.5 2.65894,-45l0,-21.09c0,-22.5 -2.65894,-45 -2.65894,-45zm-163.26487,104.46l0,-97.77l83.00775,48.885l-83.00775,48.885z"/>
   </g>
  </g>
 </g>
</svg>

И она же, только закодированный исходный код в строку base64:

PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCiA8Zz4KICA8dGl0bGU+YmFja2dyb3VuZDwvdGl0bGU+CiAgPHJlY3QgZmlsbD0ibm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjUxNCIgd2lkdGg9IjUxNCIgeT0iLTEiIHg9Ii0xIi8+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPGcgc3Ryb2tlPSJudWxsIiBpZD0ic3R5bGVfMl9jb3B5XzMiPgogICA8ZyBzdHJva2U9Im51bGwiIGlkPSJTaG9wcGluZ18xMF8xM18iPgogICAgPGcgc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzEiPgogICAgIDxnIHN0cm9rZT0ibnVsbCIgaWQ9InN2Z18yIj4KICAgICAgPGcgc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzMiPgogICAgICAgPHBhdGggc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzQiIGZpbGw9IiNGRkZGRkYiIGQ9Im0yNTYsNDg3LjVjLTEzMC42MDg4NCwwIC0yMzYuODU5MzgsLTEwNC4yOTUgLTIzNi44NTkzOCwtMjMyLjVzMTA2LjI1MDUzLC0yMzIuNSAyMzYuODU5MzgsLTIzMi41czIzNi44NTkzOCwxMDQuMjk1IDIzNi44NTkzOCwyMzIuNXMtMTA2LjI1MDUzLDIzMi41IC0yMzYuODU5MzgsMjMyLjV6Ii8+CiAgICAgIDwvZz4KICAgICAgPGcgc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzUiPgogICAgICAgPGcgc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzYiPgogICAgICAgIDxwYXRoIHN0cm9rZT0ibnVsbCIgaWQ9InN2Z183IiBmaWxsPSIjMTQ5YjU1IiBkPSJtMjU2LDMwYzEyNi4zOTEyMiwwIDIyOS4yMTg3NSwxMDAuOTM1IDIyOS4yMTg3NSwyMjVzLTEwMi44Mjc1MywyMjUgLTIyOS4yMTg3NSwyMjVzLTIyOS4yMTg3NSwtMTAwLjkzNSAtMjI5LjIxODc1LC0yMjVzMTAyLjgyNzUzLC0yMjUgMjI5LjIxODc1LC0yMjVtMCwtMTVjLTEzNS4wNDA0MSwwIC0yNDQuNSwxMDcuNDQ1IC0yNDQuNSwyNDBzMTA5LjQ1OTU5LDI0MCAyNDQuNSwyNDBzMjQ0LjUsLTEwNy40NDUgMjQ0LjUsLTI0MHMtMTA5LjQ1OTU5LC0yNDAgLTI0NC41LC0yNDBsMCwweiIvPgogICAgICAgPC9nPgogICAgICA8L2c+CiAgICAgPC9nPgogICAgIDxnIHN0cm9rZT0ibnVsbCIgaWQ9InN2Z184Ij4KICAgICAgPGcgc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzExIj4KICAgICAgIDxnIHN0cm9rZT0ibnVsbCIgaWQ9InN2Z18xMiI+CiAgICAgICAgPHBhdGggc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzEzIiBmaWxsPSIjREJEQkRCIiBkPSJtMjU2LDYwLjEwNWMxMDkuNDkwMTYsMCAxOTguNTQ5MjgsODcuNDM1IDE5OC41NDkyOCwxOTQuODk1cy04OS4wNzQ0MSwxOTQuODk1IC0xOTguNTQ5MjgsMTk0Ljg5NXMtMTk4LjU0OTI4LC04Ny40MzUgLTE5OC41NDkyOCwtMTk0Ljg5NXM4OS4wNTkxMywtMTk0Ljg5NSAxOTguNTQ5MjgsLTE5NC44OTVtMCwtNy41Yy0xMTMuODkxMTYsMCAtMjA2LjE4OTkxLDkwLjYgLTIwNi4xODk5MSwyMDIuMzk1czkyLjI5ODc1LDIwMi4zOTUgMjA2LjE4OTkxLDIwMi4zOTVzMjA2LjE4OTkxLC05MC42MTUgMjA2LjE4OTkxLC0yMDIuMzk1cy05Mi4zMTQwMywtMjAyLjM5NSAtMjA2LjE4OTkxLC0yMDIuMzk1bDAsMHoiLz4KICAgICAgIDwvZz4KICAgICAgPC9nPgogICAgIDwvZz4KICAgIDwvZz4KICAgPC9nPgogICA8ZyBzdHJva2U9Im51bGwiIGlkPSJzdmdfMTQiPgogICAgPHBhdGggc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzE1IiBmaWxsPSIjMDBiZjVmIiBkPSJtMzg2LjEwNDU2LDE5OS40MjVjMCwwIC0yLjU4MjUzLC0xOS4xNyAtMTAuNTQ0MDYsLTI3LjYxNWMtMTAuMTAwOTEsLTExLjA3IC0yMS40MDkwMywtMTEuMTMgLTI2LjYwNDY2LC0xMS43NmMtMzcuMTY0LC0yLjgyIC05Mi44OTQ3MSwtMi44MiAtOTIuODk0NzEsLTIuODJsLTAuMTIyMjYsMGMwLDAgLTU1LjczMDcxLDAgLTkyLjg5NDcxLDIuODJjLTUuMTgwMzUsMC42MyAtMTYuNDg4NDcsMC42OSAtMjYuNjA0NjYsMTEuNzZjLTcuOTQ2MjUsOC40NDUgLTEwLjU0NDA2LDI3LjYxNSAtMTAuNTQ0MDYsMjcuNjE1cy0yLjY1ODk0LDIyLjUgLTIuNjU4OTQsNDQuOTg1bDAsMjEuMDljMCwyMi41MTUgMi42NTg5NCw0NSAyLjY1ODk0LDQ1czIuNTgyNTMsMTkuMTcgMTAuNTQ0MDYsMjcuNTg1YzEwLjExNjE5LDExLjA3IDIzLjM2NTAzLDEwLjcyNSAyOS4yNzg4OCwxMS44OGMyMS4yNDA5MywyLjE0NSA5MC4yODE2MiwyLjgwNSA5MC4yODE2MiwyLjgwNXM1NS43OTE4NCwtMC4wOSA5Mi45NTU4NCwtMi44OTVjNS4xODAzNSwtMC42NiAxNi41MDM3NSwtMC43MiAyNi42MDQ2NiwtMTEuNzc1YzcuOTQ2MjUsLTguNDMgMTAuNTQ0MDYsLTI3LjU4NSAxMC41NDQwNiwtMjcuNTg1czIuNjU4OTQsLTIyLjUgMi42NTg5NCwtNDVsMCwtMjEuMDljMCwtMjIuNSAtMi42NTg5NCwtNDUgLTIuNjU4OTQsLTQ1em0tMTYzLjI2NDg3LDEwNC40NmwwLC05Ny43N2w4My4wMDc3NSw0OC44ODVsLTgzLjAwNzc1LDQ4Ljg4NXoiLz4KICAgPC9nPgogIDwvZz4KIDwvZz4KPC9zdmc+

Теперь подставляем данные в качестве значения дата атрибута:

<div id="kinoplayertop" data-kinopoisk="444" data-btn-svg-base64="trailer:PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCiA8Zz4KICA8dGl0bGU+YmFja2dyb3VuZDwvdGl0bGU+CiAgPHJlY3QgZmlsbD0ibm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjUxNCIgd2lkdGg9IjUxNCIgeT0iLTEiIHg9Ii0xIi8+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPGcgc3Ryb2tlPSJudWxsIiBpZD0ic3R5bGVfMl9jb3B5XzMiPgogICA8ZyBzdHJva2U9Im51bGwiIGlkPSJTaG9wcGluZ18xMF8xM18iPgogICAgPGcgc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzEiPgogICAgIDxnIHN0cm9rZT0ibnVsbCIgaWQ9InN2Z18yIj4KICAgICAgPGcgc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzMiPgogICAgICAgPHBhdGggc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzQiIGZpbGw9IiNGRkZGRkYiIGQ9Im0yNTYsNDg3LjVjLTEzMC42MDg4NCwwIC0yMzYuODU5MzgsLTEwNC4yOTUgLTIzNi44NTkzOCwtMjMyLjVzMTA2LjI1MDUzLC0yMzIuNSAyMzYuODU5MzgsLTIzMi41czIzNi44NTkzOCwxMDQuMjk1IDIzNi44NTkzOCwyMzIuNXMtMTA2LjI1MDUzLDIzMi41IC0yMzYuODU5MzgsMjMyLjV6Ii8+CiAgICAgIDwvZz4KICAgICAgPGcgc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzUiPgogICAgICAgPGcgc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzYiPgogICAgICAgIDxwYXRoIHN0cm9rZT0ibnVsbCIgaWQ9InN2Z183IiBmaWxsPSIjMTQ5YjU1IiBkPSJtMjU2LDMwYzEyNi4zOTEyMiwwIDIyOS4yMTg3NSwxMDAuOTM1IDIyOS4yMTg3NSwyMjVzLTEwMi44Mjc1MywyMjUgLTIyOS4yMTg3NSwyMjVzLTIyOS4yMTg3NSwtMTAwLjkzNSAtMjI5LjIxODc1LC0yMjVzMTAyLjgyNzUzLC0yMjUgMjI5LjIxODc1LC0yMjVtMCwtMTVjLTEzNS4wNDA0MSwwIC0yNDQuNSwxMDcuNDQ1IC0yNDQuNSwyNDBzMTA5LjQ1OTU5LDI0MCAyNDQuNSwyNDBzMjQ0LjUsLTEwNy40NDUgMjQ0LjUsLTI0MHMtMTA5LjQ1OTU5LC0yNDAgLTI0NC41LC0yNDBsMCwweiIvPgogICAgICAgPC9nPgogICAgICA8L2c+CiAgICAgPC9nPgogICAgIDxnIHN0cm9rZT0ibnVsbCIgaWQ9InN2Z184Ij4KICAgICAgPGcgc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzExIj4KICAgICAgIDxnIHN0cm9rZT0ibnVsbCIgaWQ9InN2Z18xMiI+CiAgICAgICAgPHBhdGggc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzEzIiBmaWxsPSIjREJEQkRCIiBkPSJtMjU2LDYwLjEwNWMxMDkuNDkwMTYsMCAxOTguNTQ5MjgsODcuNDM1IDE5OC41NDkyOCwxOTQuODk1cy04OS4wNzQ0MSwxOTQuODk1IC0xOTguNTQ5MjgsMTk0Ljg5NXMtMTk4LjU0OTI4LC04Ny40MzUgLTE5OC41NDkyOCwtMTk0Ljg5NXM4OS4wNTkxMywtMTk0Ljg5NSAxOTguNTQ5MjgsLTE5NC44OTVtMCwtNy41Yy0xMTMuODkxMTYsMCAtMjA2LjE4OTkxLDkwLjYgLTIwNi4xODk5MSwyMDIuMzk1czkyLjI5ODc1LDIwMi4zOTUgMjA2LjE4OTkxLDIwMi4zOTVzMjA2LjE4OTkxLC05MC42MTUgMjA2LjE4OTkxLC0yMDIuMzk1cy05Mi4zMTQwMywtMjAyLjM5NSAtMjA2LjE4OTkxLC0yMDIuMzk1bDAsMHoiLz4KICAgICAgIDwvZz4KICAgICAgPC9nPgogICAgIDwvZz4KICAgIDwvZz4KICAgPC9nPgogICA8ZyBzdHJva2U9Im51bGwiIGlkPSJzdmdfMTQiPgogICAgPHBhdGggc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzE1IiBmaWxsPSIjMDBiZjVmIiBkPSJtMzg2LjEwNDU2LDE5OS40MjVjMCwwIC0yLjU4MjUzLC0xOS4xNyAtMTAuNTQ0MDYsLTI3LjYxNWMtMTAuMTAwOTEsLTExLjA3IC0yMS40MDkwMywtMTEuMTMgLTI2LjYwNDY2LC0xMS43NmMtMzcuMTY0LC0yLjgyIC05Mi44OTQ3MSwtMi44MiAtOTIuODk0NzEsLTIuODJsLTAuMTIyMjYsMGMwLDAgLTU1LjczMDcxLDAgLTkyLjg5NDcxLDIuODJjLTUuMTgwMzUsMC42MyAtMTYuNDg4NDcsMC42OSAtMjYuNjA0NjYsMTEuNzZjLTcuOTQ2MjUsOC40NDUgLTEwLjU0NDA2LDI3LjYxNSAtMTAuNTQ0MDYsMjcuNjE1cy0yLjY1ODk0LDIyLjUgLTIuNjU4OTQsNDQuOTg1bDAsMjEuMDljMCwyMi41MTUgMi42NTg5NCw0NSAyLjY1ODk0LDQ1czIuNTgyNTMsMTkuMTcgMTAuNTQ0MDYsMjcuNTg1YzEwLjExNjE5LDExLjA3IDIzLjM2NTAzLDEwLjcyNSAyOS4yNzg4OCwxMS44OGMyMS4yNDA5MywyLjE0NSA5MC4yODE2MiwyLjgwNSA5MC4yODE2MiwyLjgwNXM1NS43OTE4NCwtMC4wOSA5Mi45NTU4NCwtMi44OTVjNS4xODAzNSwtMC42NiAxNi41MDM3NSwtMC43MiAyNi42MDQ2NiwtMTEuNzc1YzcuOTQ2MjUsLTguNDMgMTAuNTQ0MDYsLTI3LjU4NSAxMC41NDQwNiwtMjcuNTg1czIuNjU4OTQsLTIyLjUgMi42NTg5NCwtNDVsMCwtMjEuMDljMCwtMjIuNSAtMi42NTg5NCwtNDUgLTIuNjU4OTQsLTQ1em0tMTYzLjI2NDg3LDEwNC40NmwwLC05Ny43N2w4My4wMDc3NSw0OC44ODVsLTgzLjAwNzc1LDQ4Ljg4NXoiLz4KICAgPC9nPgogIDwvZz4KIDwvZz4KPC9zdmc+"></div>
<script src="//kinoplayer.top/top.js"></script>

Результат: