Error - Pantalla morada en vídeos de Youtube

Corrección de pantalla morada al reproducir vídeo en Youtube.

Esta es una solución para cuando la imágen del vídeo se comienza a ver de color morado. Y esto sucede en todos los vídeos.

1. Configuración
2. Configuración Avanzada.
3. Sistema.
4. Utilizar aceleración por hardware cuando este disponible.

Grid - Primer código

HTML

    <div class="grid-container">

        <div class="item1" id="resumen">

            <a href="https://unsplash.com/es" id="enlace"></a>

        </div>

        <div class="item2">

            <a href="https://www.w3schools.com/js/js_intro.asp" id="enlace"></a>

        </div>

        <div class="item3">spidder</div>  

        <div class="item4">fissh</div>

        <div class="item5">birdds</div>

        <div class="item6">repptile</div>

        <div class="item7">innsect</div>

        <div class="item8">gusann</div>

       

      </div>

CSS

#enlace{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 10;

  }

 

  .item1 { grid-area: mammif; position: relative;}

  .item2 { grid-area: star; position: relative;}

  .item3 { grid-area: spidder; }

  .item4 { grid-area: fissh; }

  .item5 { grid-area: birdds; }

  .item6 { grid-area: repptile; }

  .item7 { grid-area: innsect; }

  .item8 { grid-area: gusann; }

 

  .grid-container {

    display: grid;

    grid-template-areas:

      'mammif  star spidder '

      'mammif  fissh fissh '

      'birdds  birdds repptile '

      'innsect gusann repptile ';

    gap: 10px;

    padding: 10px;

    background-color: blue;

    height: 100vh;

  }

 

  .grid-container > div {

    background-color: rgb(255, 0, 0);

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

  }

  .grid-container > div:first-child{

    background-image: url(https://c.tenor.com/D0mMDlj9g8AAAAAd/wolf-love.gif);

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;  

  }

  .grid-container > div:nth-child(2){

    background-image: url(https://j.gifs.com/qj6g1y@small.gif);

    background-position: top;

    background-repeat: no-repeat;

    background-size: cover;  

  }

HTML - Enlace desde una caja (div)

Código para enlazar una div a un enlace.

HTML

    <div id="intro">

        <a href="https://mike-salinas.blogspot.com/" id="enlace"></a>

    </div>

 CSS

#enlace{

    position: absolute;

    width: 100%;

    height: 100%;

}

#intro{

    width: 200px;

    height: 200px;

    position: relative;

    background: red;

}

ROMS - Juegos para Project 64

 

Roms de juegos

Encuentra los mejores roms de juegos para tu pc

CONSOLAS

1. Nintendo
2. Super Nintendo
3. N64
4. Playstation
5. Playstation 2

JS - Mostrar y ocultar imagen

Un breve código para mostrar y ocultar imagenes o contenido con javascript

HTML

<button id="boton" onclick="mostrar();">Mostrar Imagen</button>

<button id="boton" onclick="ocultar();">Ocultar Imagen</button>

<div id="img">

  <img src="#" alt="">

</div>

CSS

#img{

    display: none;

}

JS

function mostrar(){

    document.getElementById('img').style.display = 'block';

}

function ocultar(){

    document.getElementById('img').style.display = 'none';

}

Animación Scroll JS - Mostrar al hacer scroll el contenido

Código 

HTML

class="animado"

CSS

/**************   ANIMACIONES   **************/

.animado{

    opacity: 0;

    transition: all .5s;

}

.mostrarArriba{

    animation: mostrarArriba 1s;

}

@keyframes mostrarArriba{

    0% {

        transform: translateY(60px);

    }

    100% {

        transform: translateY(0);

    }

}

JS

/********************* SCROLL ANIMADO *********************/

let animado = document.querySelectorAll(".animado");

function mostrarScroll (){

  let scrollTop = document.documentElement.scrollTop;

  for (var i = 0; i < animado.length; i++){

    let alturaAnimado = animado[i].offsetTop;

    if(alturaAnimado - 250 < scrollTop){

      animado[i].style.opacity = 1;

      animado[i].classList.add("mostrarArriba");

    }

  }

}

window.addEventListener('scroll', mostrarScroll)

CSS - Enlazar la hoja de estilos de una página hacia una carpeta

Código para enlazar la hoja de estilos de una carpeta hacia el archivo.

 href="../css/estilos2.css"

Menú - Links escondidos con media query

 HTML

    <header class="header">

        <div class="container logo-nav-container">

         

          <a href="" class="logo">

            <img src="img/mklogo.png" alt="">

          </a>

         

          <span class="menu-icon">

              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Umbrella_Corporation_logo.svg/1024px-Umbrella_Corporation_logo.svg.png" alt="" height="45px" title="Clic aquí">            

            </span>

           

          <nav class="navigation">

            <ul>

              <li><a href="">Inicio</a></li>

              <li><a href="">Servicios</a></li>

              <li><a href="">Contacto</a></li>

              <li><a href="">Blog</a></li>

            </ul>

          </nav>

        </div>

      </header>

   

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="#ruta de tu archivo"></script>

CSS

body{

    width: 100%;

    margin: 0%;

    padding: 0%;

    font-family: 'Varela Round', sans-serif;

    font-size: 15px;

    color: rgb(0, 0, 0);

    overflow: hidden;

}

/**************   HEADER   **************/

header{

    height: auto;

    color: white;

    left: 0;

    top: 0;

    right: 0;

    position: relative;

    z-index: 1;

}

.logo-nav-container{

    height: 120px;

    display: flex;

    flex-flow: wrap;

    align-items: center;

    justify-content: space-around;

    background-image: url(https://besthqwallpapers.com/Uploads/4-5-2019/90085/thumb2-gray-snake-skin-texture-cobra-skin-texture-creative-background-snake-skin-background.jpg);

    background-position: center;

    box-shadow: 4px 7px 21px -6px rgba(0,0,0,0.97);

    -webkit-box-shadow: 4px 7px 21px -6px rgba(0,0,0,0.97);

    -moz-box-shadow: 4px 7px 21px -6px rgba(0,0,0,0.97);

}

.logo{

    display: flex;

    align-items: center;

}

.logo img{

    height: 120px;

}

.menu-icon{

    display: none;

}

.navigation ul{

    margin: 0;

    padding: 0;

    list-style: none;    

}

.navigation ul li{

    display: inline-block;

}

.navigation ul li a{

    font-size: 1rem;

    text-transform: uppercase;

    display: block;

    padding: 0.5rem 1rem;

    transition: all 0.3s linear;

    text-decoration: none;

    color: rgb(255, 255, 255);

    border-bottom: 2px solid transparent;

}

.navigation ul li a:hover{

    color: rgb(226, 226, 226);

    border-bottom: 2px solid white;

}

/**************** MEDIA QUERY ****************/

@media (min-width: 200px) and (max-width: 600px){

    

    .logo-nav-container{

        height: auto;

    }    

    .logo img{

        height: 80px;

    }

    .menu-icon{

        display: block;

        cursor: pointer;

    }

    .menu-icon img{

        height: 80px;

        border: 2px solid rgb(84, 255, 4);

        border-radius: 100%;

        margin: 10px 0px;

    }

    .navigation {

        width: 100%;

        clear: "";

        background: rgba(0, 0, 0, 0.39);

    }

    .navigation ul{

        display: none;

    }

    .navigation ul.show{

        display: block;

    }

    .navigation ul li{

        display: block;

    }

    .navigation ul li a{

        display: block;

        transition: .3s all linear;

        text-align: center;

    }

    .navigation ul li a:hover{

        color: rgb(0, 177, 9);

        background: rgb(255, 255, 255);

    }    

}

JS

jQuery('document').ready(function($){

    var menuBtn = $('.menu-icon'),

        menu = $('.navigation ul');

        menuBtn.click(function(){

            if (menu.hasClass('show')){

                menu.removeClass('show');

            }else {

                menu.addClass('show');

            }

        });

});

HTML5 - Código Whatsapp

CÓDIGO PARA CREAR ENLACE EN TU SITIO WEB DE WHATSAPP

Asi fue mi primer pensamiento al intentar agregar el código de whatsapp a mi sitio web, no ubicaba del porque cuando abria el enlace desde el cel se tardaba en cargar o simplemente abria el sitio web de whatsapp, cuando debería ser inmediato en la app... (Aún sigo pensando del porque whatsapp siempre cambia los códigos para sus enlaces directos...)

He aquí la solución de código enlace whatsapp:

Código para enlace Whatsapp (web):

<a href="https://web.whatsapp.com/send/?phone=+528126220572&text=Hola%2C+Necesito+mas+informaci%C3%B3n" target="_blank"><img src="img/whatsappicon.png" alt=""></a>

Código para enlace Whatsapp (APP):

<a href="https://api.whatsapp.com/send/?phone=+528126220572&text=Hola%2C+Necesito+mas+informaci%C3%B3n" target="_blank"><img src="img/whatsappicon.png" alt=""></a>

CSS - Ajuste de imagen en backgroun para enlace

Código para ajustar una imagen como icono con CSS

 .linkkers a:first-child{

display:flex;

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilIdquQAUNA1u4vVqTNAXjurVGnRzKsyW83SMDNMOYAvhQWHgPKa2D5mw3e83HAy7Bm2dwOTAgG-YFIWA1BocyQStnBbkcAyK-c2OkRi0GxSwgZGPcy6hw2JNuDhW0K14cUeHvfn85Uj1qEeNFR94NVeZJtToEzuVCmMlv3VGRJ8V9C-s-JIiS7M9n1Q/s16000/colmena.png);

background-position: center center;

background-repeat: no-repeat;

background-size: 30px;

}