En esta actividad, agregará un video a una página web.

• Continuaremos usando 'media.php'.
• Si necesitas el código de nuevo, aquí está. No te preocupes si el tuyo es diferente a este, probablemente hayas cambiado tu página a tu gusto.
• media.php
• style.css

• Comience una nueva línea después del texto, antes de la etiqueta <main> de cierre.
• Agrega el siguiente código.

        <video src="http://it.bibliotecasmedellin.gov.co/bibliolabs/numeros/1.mp4"></video>

• Debería poder entender este código. Colocará un video en su página, en este caso ubicada en las Bibliotecas de Medellín. Este video fue elaborado por mis colegas para enseñar el lenguaje de señas.
• Si observa el resultado (guarde y cargue su archivo primero), lo primero que notará es que el video ocupa mucho más espacio del necesario. Arreglemos eso.

video {
  max-height: 250px;
}

• ¿Mejor?

• Lo siguiente que notará es que no parece un video. Es solo una imagen sin movimiento y sin controles. Necesitamos agregarlos manualmente.

        <video src="http://it.bibliotecasmedellin.gov.co/bibliolabs/numeros/1.mp4" controls muted loop autoplay></video>

• Aquí, estamos agregando cuatro atributos diferentes al archivo de video.
• controls agrega los controles estándar en la parte inferior del reproductor de video.
• muted establece el volumen de audio en cero para que no moleste a los usuarios cuando abran la página por primera vez.
• loop le dice al navegador que reproduzca el video cuando termine. Debido a que es muy corto, queremos que se ejecute más de una vez.
• autoplay le dice al navegador que inicie el video tan pronto como esté listo. Sin esto, el video esperará a que el usuario presione reproducir.

• Envolvamos el texto alrededor del video también.
• Primero, sube el video tres líneas para que quede entre el segundo y el tercer párrafo.

        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="árbol al atardecer" title="esta fue la primera imagen incluida en Google cuando revisé">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec enim sem, efficitur et fringilla et, pretium at turpis. Nunc interdum, dolor vitae aliquam accumsan, lacus sapien varius tortor, fringilla lobortis turpis tortor et ante. In hac habitasse platea dictumst. Nullam elementum blandit tincidunt. Sed semper finibus massa, non mollis nulla mollis et. Nunc lectus metus, tempor nec dui ut, pharetra eleifend massa. Ut tempus porta metus, eget aliquet ligula tempor hendrerit. Curabitur vestibulum elit en commodo viverra. Nullam est orci, suscipit vitae tincidunt porta, lacinia sed nulla. Quisque ex eros, consectetur id metus sit amet, molestie tempor risus. In facilisis consequat eros in convallis. Nulla nec imperdiet nibh. Suspendisse consequat sit amet mi in imperdiet. Nullam eget aliquet metus. Vestíbulo no fermentum eros.
        <p>Morbi gravida malesuada odio, sed pretium libero aliquam vitae. Suspensión de potencia. Nunc eget leo vulputate, dictum eros non, gravida lorem. In id nunc id orci ornare porttitor. Mecenas id laoreet risus. Aenean lacinia dignissim volutpat. Morbi et ligula ac purus gravida aliquet. Entero feugiat sapien ac porttitor iaculis.</p>
        <video src="http://it.bibliotecasmedellin.gov.co/bibliolabs/numeros/1.mp4" controls muted loop autoplay></video>
        <p>Phasellus pretium sit amet tellus ac tincidunt. Curabitur en ligula massa. Vivamus in urna suscipit, vehicula velit et, mollis purus. Aliquam sed risus vel urna tristique aliquam. Etiam egestas lectus arcu, quis lobortis diam luctus in. Vivamus id diam metus. Nulla bibendum dolor sit amet egestas semper. Praesent facilisis pellentesque condimentum.</p>
        <p>Mauris ac sapien justo. Curabitur a feugiat velit. Donec non mi ac turpis faucibus hendrerit. Nulla luctus est lectus, nec rhoncus nisi eleifend ac. Nullam iaculis mi eget faucibus mattis. Nullam nec cursus nisi. Donec vel nunc ac felis sodales tincidunt sed condimentum mauris.</p>
        <p>Praesent lobortis dictum purus, convallis dapibus velit malesuada non. Sed sit amet magna sagittis, maximus odio in, mattis erat. Phasellus ultricies risus turpis, vitae tempor diam finibus eu. Sed luctus augue purus, eget consectetur sapien egestas et. Sed eget tristique mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum rhoncus vehicula pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean placerat arcu vitae nisi vehicula semper. Cras sit amet risus dolor.</p>

• Notarás que el posicionamiento del video es bastante horrible ahora. Está 'flotando' a la derecha de la imagen, pero en realidad está en medio de la nada. Y debido a que no tiene float valor por sí mismo, el texto tampoco flota a su alrededor.
• Vamos a moverlo a la derecha.

  float: right;

• Ahora se ve mejor. Está sentado al otro lado del <main> elemento con el texto fluyendo entre ellos.
• Tal vez no le guste este aspecto porque no hay suficiente espacio para el texto entre la imagen y el video. Siempre puede mover el video hacia abajo debajo del siguiente párrafo, pero eso se vuelve incómodo si alguna vez desea cambiar el texto del párrafo o crearlo dinámicamente. En su lugar, podemos decirle al video que baje lo suficiente como para “borrar” los otros elementos flotantes.

  clear: left;

• Aquí, solo tenemos otro elemento flotante y está a la izquierda, así que hemos usado esa opción. También podríamos usar 'derecho' o 'ambos' como opciones.

• Terminemos aplicando el mismo relleno y márgenes.

    margin: 20px 0px 20px 20px;
    padding: 10px;

• Aunque no estoy seguro de que alguna vez quieras hacer esto, también puedes redondear las esquinas del video con el mismo CSS que para las imágenes.
• Siéntase libre de agregar un borde si cree que también se ve mejor.

• media.php
• style.css
• resultado

Siguiente: Audio