Generador de iframes de películas para Blogger

Civer dijo:

Hola a todo hay un codigo para conseguir esto, asi como se muestra en la imagen
con un boton y te da el iframe de la pelis, para tener varias opciones

Para blogger

Ver el archivo adjunto 193714

Hacer clic para expandir...

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

Stron dijo:

Eso no es otra cosa que un tab de opciones. Aqui puedes ver un codigo de como hacerlo.

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

Hacer clic para expandir...

Civer dijo:

Gracias me funciono.
Pero este codigo me daña algunas cosas en el tema:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Hacer clic para expandir...

<style>
/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
</style>

<div class="tab">
<button class="tablinks" onclick="openCity(event, 'opcion1')">Opcion 1</button>
  <button class="tablinks" onclick="openCity(event, 'opcion2')">Opcion 2</button>
  <button class="tablinks" onclick="openCity(event, 'opcion3')">Opcion 3</button>
</div>
<div class="tabcontent" id="opcion1" style="display:block;">
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/IIYUyi2_sNU" width="560"></iframe>
</div>
<div class="tabcontent" id="opcion2">
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/hzmpysD8Ql0" width="560"></iframe>
</div>
<div class="tabcontent" id="opcion3">
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/d4hute00IAE" width="560"></iframe>
</div>
<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>

Stron dijo:

Usa estos estilos en lugar de <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

CSS:

<style>
/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
</style>

y este HTML

HTML:

<div class="tab">
<button class="tablinks" onclick="openCity(event, 'opcion1')">Opcion 1</button>
  <button class="tablinks" onclick="openCity(event, 'opcion2')">Opcion 2</button>
  <button class="tablinks" onclick="openCity(event, 'opcion3')">Opcion 3</button>
</div>
<div class="tabcontent" id="opcion1" style="display:block;">
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/IIYUyi2_sNU" width="560"></iframe>
</div>
<div class="tabcontent" id="opcion2">
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/hzmpysD8Ql0" width="560"></iframe>
</div>
<div class="tabcontent" id="opcion3">
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/d4hute00IAE" width="560"></iframe>
</div>
<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>

Hacer clic para expandir...

Civer dijo:

En que parte puedo poner la css

Hacer clic para expandir...