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');

            }

        });

});