Alguna vez viste en una pagina web de películas, series, animes, o en cualquier otra página web de contenido de video que contiene una caja de reproductor pero que este se pueda seleccionar varias opciones de reproducción, ya que al algunas ocasiones una opción deja de reproducir o puede que aya una reproductor preferido, es por ello que aquí te muestro de como como tener habilitado este código en una pagina con html.

¿Que es un reproductor con opciones?

este viene a ser un reproductor donde se puede colocar varios enlaces embed de video, donde el usuario puede pulsar en varios botones para escoger su reproductor preferido

¿Que tipo de contenido puedo colocar en el reproductor?

En este reproductor puedes colocar solo videos con enlace embed, o hasta puedes colocar enlaces de paginas donde sera visible mediante la etiqueta iframe

¿Cuantas opciones puedo colocar?

En el reproductor que voy a proporcionar el código, puedes colocar opciones ilimitados, los cuales se verán en forma de scroll deslizante a la derecha de la barra de pie del reproductor

Ahora empecemos a configurar el reproductor

Para insertar el codigo y visualizar el reproductor, vamos a ingresar el código con estos simples pasos en nuestro blog en Blogger.

ingresamos al panel de Blogger, accedemos a la sección TEMA, luego pulsamos en el icono que se encuentra al costado del boton Personalizar, se nos desplegará un menú, pulsamos en EDITAR HTML, se nos abrirá el codigo fuente de nuestro blog, alli buscamos </head> y justo arriba pegamos el siguiente codigo

<style>
#kaurukavideo{max-width:800px;width:100%;margin:auto;overflow:hidden;box-shadow:0 2px 6px -1px rgb(7 10 25 / 5%),0 6px 12px -6px rgb(7 10 25 / 10%);border-radius:8px}
.lazy-v{position:relative;width:100%;height:0;padding-bottom:56.65%;background-color:#c9c9c912;overflow:hidden}
.lazy-v iframe{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpS1WdEHqdho1VeUVFaAJ9-jjkVe1HiW_UsFZWzx_464C751__omORr8nf-jZqoB4EBW1yFr2C5vW2sIZLlw2zO_aRM6fx4C1_YoxK3u-h_bIMsP8YYIOtalJmSh2isS6fnsCFcw9Sb0NM6s_9LONUQ0tdK01uuQ1U4Z7wvbgr27hpjILoo2zWLz0AvmQ7/s120/loading.gif) center center no-repeat}
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;background-color:transparent;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:All 0.2s;cursor:pointer}
.play span{border-style:solid;border-width:22px 0 27px 41.7px;border-color:transparent transparent transparent white;margin-left:10px}
.play:hover{background-color:rgb(87 87 87 / 70%);width:80px;height:80px}
.lazy-v img{position:absolute;top:0;left:0;width:calc(100% + 5px);border:0;border-radius:0;opacity:0.95;z-index:-1}
#kaurukavideo .lazy-v p{color:#fff;display:flex;justify-content:center}
.lazy-v iframe{position:absolute;bottom:0;right:0;width:100%;height:100%}
.servideo{display:flex;flex-wrap:wrap;gap:10px;padding:12px;font-size:13px;background-color:#0202024f}
.servideo .change-video{background-color:#222;color:#eee;border-radius:4px;padding:4px 10px;cursor:pointer;align-items:center;display:flex;transition:.4s ease}
.servideo .change-video:hover,.servideo .change-video.c-aktif{background:rgb(99 77 235);transition:.4s ease}
.servideo .change-video:before{content:"";opacity:0}
.servideo .change-video.c-aktif:before{content:"";margin-right:5px;margin-left:-5px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Eplay-circle%3C/title%3E%3Cpath d='M10,16.5V7.5L16,12M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' fill='%23fff' /%3E%3C/svg%3E");width:18px;height:18px;display:inline-block;transition:.3s;opacity:1}
</style>

Luego buscamod o ubicamos el </body> el cual mayormente se ubica en la parte final del codigo fuente, y justo arriba colocamos este código script, el cual ará que funcione nuestro reproductor

<script>/*<![CDATA[*/
  (function() {
    var thum = "";
    'use strict';
    function kaurukaLV($el) {
        var id = $el.getAttribute('data-embed'),
            $playBtn = $el.querySelector('.play'),
            $thumbnailImg = $el.querySelector('.thumb-v');
        $playBtn.addEventListener('click', function() {
            if (!id) {
                var activeButton = document.querySelector('.change-video.c-aktif');
                if (activeButton) {
                    id = activeButton.getAttribute('data-embed');}}
            if (id) {
                $el.innerHTML = '<iframe src="' + id + '" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>';}});
        var thumbnailUrl = thum;
        $thumbnailImg.src = thumbnailUrl;
        $thumbnailImg.onerror = function() {
            $thumbnailImg.remove();
            var errorText = document.createElement('p');
            errorText.textContent = 'Pulse para reproducir.';
            $el.appendChild(errorText);
        };}
    var elements = document.querySelectorAll('.lazy-v');
    elements.forEach(function($el) {
        kaurukaLV($el);});
    var changeButtons = document.querySelectorAll('.change-video');
    changeButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            changeButtons.forEach(function(otherButton) {
                otherButton.classList.remove('c-aktif');});
            button.classList.add('c-aktif');
            var newEmbedUrl = button.getAttribute('data-embed');
            var videoContainer = document.querySelector('.lazy-v');
            var iframe = document.createElement('iframe');
            iframe.src = newEmbedUrl;
            iframe.frameBorder = "0";
            iframe.allowfullscreen = "true";
            iframe.setAttribute("allow", "fullscreen");
            iframe.webkitallowfullscreen = "true";
            iframe.mozallowfullscreen = "true";
            videoContainer.innerHTML = "";
            videoContainer.appendChild(iframe);
        });
    });
})();
/*]]>*/
</script>

Finalmente, nos tocará agregar el codigo HTML en la entrada o página de nuestro blog, es decir en el lugar donde queremos que aparezca el reproductor con opciones.

Para ello vamos a crear una nueva entrada o página, activamos la vista en HTML y pegamos el código que dejo a continuación:

<div id="kaurukavideo">
<div class='lazy-v' data-embed='' style='z-index: 1;'>
<div class='play'><span></span></div>
<img class='thumb-v' src='' alt='Video Thumbnail'>
</div>
<div class="servideo">
    <span class="change-video c-aktif" data-embed="https://www.youtube.com/embed/L3374C3OyrY"> Opcion 1</span>
    <span class="change-video" data-embed="https://www.youtube.com/embed/xkRhg12UP5M">Opción 2</span>
    <span class="change-video" data-embed="https://www.youtube.com/embed/krg8TvIdV9Q">Opcion 3</span>
    <span class="change-video" data-embed="https://www.youtube.com/embed/DxoU8iOrV7k">Opcion 4</span>
  </div>
</div>

Listo, ya tendremos nuestro reproductor con opciones, donde simplemente vamos a modificar los enlaces embed que se muestran en cada etiqueta change-video el cual quedaría así como se ve en la imagen: