0

hola quiziera poner una imagen sobre un video alojado en google drive sea cual sea su resolucion o tamaño, en la parte superior o franja para bloquear un boton que te envia a descargas y demas, mis escazos conocimientos de html y css me lo impiden jajaja..agradezco su ayuda, Saludos!!

https://www.mediafire.com/file/tidewhmxux2jw1d/index-css.html/file

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <title>Editor JavaScript online - www.cubicfactory.com</title>
  <script type="text/javascript">
  </script>

  <style>
    body {
      background-image: url(https://i.postimg.cc/Z56kktVr/cemento.jpg);
      background-repeat: repeat;
    }
    
    .contenedor {
      display: flex;
      justify-content: center;
    }
    
    .mivideo {
      border: 4px groove magenta;
      margin: 0 auto;
      margin-bottom: 100px;
      overflow: hidden;
      padding: 1px;
    }
    
    .parche img {
      position: relative;
      top: -750px;
      left: 900px;
      width: 400px;
      height: 200px;
      opacity: 0.5;
    }
  </style>

</head>

<body>
  <div class="contenedor">


    <div class="mivideo"><iframe width="1280" height="720" src="https://drive.google.com/file/d/1SxUPpwUJ9rNcTMK65HYY9EUYoeI49Xpc/preview" frameborder="0" allow="autoplay" allowfullscreen></iframe>
      <div class="parche"><img src="https://i.postimg.cc/PqDf0WGR/verde.jpg"></div>

    </div>


</body>

</html>

1
  • Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.
    – Comunidad Bot
    Commented el 27 sept. 2022 a las 21:52

2 respuestas 2

0

Saqué el div que estaba de padre de la imagen, y ahora la clase parche va directamente a la imagen.

A modo de tips, debes declarar la posición de .contenedor (cualquiera pero tiene que estar declarada), para que un hijo con posición absoluta se acople bien

Luego tienes object-fit que acopla bien la imagen dentro del contenedor, en tu caso que es una imagen verde no mucho tiene sentido, pero con otro tipo de imagen es bueno ponerlo para controlar la deformación de esta al escalarla

 body {
      background-image: url(https://i.postimg.cc/Z56kktVr/cemento.jpg);
      background-repeat: repeat;
    }
    
    .contenedor {
      display: flex;
      justify-content: center;
      position:relative;
    }
    
    .mivideo {
      border: 4px groove magenta;
      margin: 0 auto;
      margin-bottom: 100px;
      overflow: hidden;
      padding: 1px;
      
    }
    
    .parche {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.5;
      object-fit:cover;
      width:100%;
      height:100%;
    }
<div class="contenedor">
  <div class="mivideo"><iframe width="1280" height="720" src="https://drive.google.com/file/d/1SxUPpwUJ9rNcTMK65HYY9EUYoeI49Xpc/preview" frameborder="0" allow="autoplay" allowfullscreen></iframe>
  <img class="parche" src="https://i.postimg.cc/PqDf0WGR/verde.jpg">
</div>

0

funciono era mas o menos lo que necesitaba para bloquear el direccionamiento a google drive..con una imagen con opacidad 0...y asi evitar que puedan hacer click sobre el..Saludos!! introducir la descripción de la imagen aquí

1
  • Esto es una no-respuesta. Acepta la otra respuesta si te ha sido útil.
    – padaleiana
    Commented el 28 sept. 2022 a las 19:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.