Generador de iframes de películas para Blogger

  • Autor Autor Civer
  • Fecha de inicio Fecha de inicio
C

Civer

Gamma
No recomendado
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

iframe.PNG
 
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...

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>
 
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...
En que parte puedo poner la css
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

ramonjosegn
¿Conoces un generador de iframes con vista previa?
Respuestas
6
Visitas
233
ramonjosegn
ramonjosegn
jonnybegood
  • Cerrado
Se solicita Solicitud de modificación en Theme: Agregar campos adicionales para iframes de video (con Child Theme)
Respuestas
4
Visitas
74
fercba
F
Miguel infante
Panel Automático para Importar Películas en Blogger
Respuestas
9
Visitas
543
Miguel infante
Miguel infante
RandomThemes
Solicitud de ayuda. para crear generador de películas en Blogger!!
2
Respuestas
25
Visitas
1K
Gwolf666
Gwolf666
Bolulevel
Recomienden plantillas de películas para blogger
Respuestas
2
Visitas
263
Bolulevel
Bolulevel
Atrás
Arriba