Como insertar un video de YouTube en tu web y que sea adaptable

Mucha gente hoy en día tiene una página web o un blog en el cual escriben sobre temas que conocen y les gustan, otros lo que se montan es una tienda online y otros simplemente crean un foro para que sean otros los que escriban en su lugar, los cuales son bastante entretenidos la verdad. Algo que, aunque hoy en día sea algo tan normal y común, hace pocos años era impensable que esto pudiera ser así, ya que solo grandes empresas u organización tenían el poder de tener un canal de comunicación que pudiera emitir o ser visto desde cualquier parte del mundo, por eso internet es para mí una gran maravilla, porque nos permite comunicarnos a todos con todos, desde cualquier parte del mundo en tiempo real y sin coste alguno, y eso es algo que para mí no tiene precio.

 


Dicha comunicación puede realizarse de muchas maneras a través de internet, ya que podemos hacerlo a través de un artículo escrito, como el que yo estoy escribiendo hoy, hacerse a través de un archivo de audio donde grabemos nuestra voz, o uno de los medios más populares últimamente y que ha dado paso a que mucha gente desconocida se haga famosa, podemos comunicarnos a través de videos en plataformas como YouTube, donde cada vez más gente sube multitud de videos explicativos o de cualquier otro tipo creados por ellos mismos, plataforma de videoblogs que además permite que otras personas puedan coger dichos videos y a través de un script inserten dichos videos en cualquier otra página web, de una forma legal, rápida y sencilla, lo que es toda una suerte, pues esto nos ayuda a nosotros y a ellos, ya que nosotros les reportaremos visitas a ellos, y ellos nos darán videos con los que complementar la información de nuestros artículos.

Además, insertar videos en nuestros artículos es una de las cosas más aconsejadas en el SEO, ya que esto hará que aumente mucho el tiempo que una persona pasa en nuestra web y aumentara la calidad y la información de nuestros artículos, haciendo que Google acabe mejorando nuestro posicionamiento y aumentando nuestras visitas. Sin embargo, hay una cosa que la primera vez que inserte un video de YouTube me llamo mucho la atención, y es que estos videos no son adaptables, es decir que, si entras por ejemplo desde un teléfono ovil a tu página web cuando hayas insertado este un video de YouTube, este se verá descuadrado y no se podrá visualizar correctamente, lo cual afecta negativamente al SEO, ya que a Google le gusta que todo nuestro contenido sea adaptable a todo tipo de pantallas.

Lo cual es irónico por que el dueño de YouTube es Google y es el que nos da los videos sin posibilidad de elegir un tamaño adaptable, pero como siempre se ha dicho en mi casa “En casa del herrero cuchara de palo”, es por ese motivo por el cual me puse a buscar una forma de poder insertar los videos de YouTube en nuestra web y en nuestros artículos, de forma que cuando cualquier persona entre y los quiera visionar, estos se muestren de forma adaptable y se vean correctamente, haciendo así que dichos videos solo nos aporte beneficios a nuestro SEO y a nuestros lectores, y ese es el motivo por el cual he escrito este artículo, para mostraros que es lo que debéis hacer para que los videos de YouTube se tengan un diseño responsive design o diseño adaptable, información que os dejo justo a continuación.


Como insertar un video de YouTube DailyMotion, u otra plataforma en tu página web y que se vea con diseño adaptable o responsive design:

Pues esto es mucho más sencillo de lo que parece, y lo haremos a través de las hojas de estilo CSS y con algún retoque del código HTML, lo primero tendremos que hacer es encontrar el archivo de hojas de estilo de nuestra web, el cual tendrá la extensión .CSS y pegaremos el siguiente código:

 .video-container {
                position:relative;
                padding-bottom:56.25%;
                padding-top:30px;
                height:0;
                overflow:hidden;
}
 
.video-container iframe, .video-container object, .video-container embed {
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
}
 
Después de copiar el código CSS anterior, guardamos y vamos a por el código de inserción del video de YouTube que queramos insertar en nuestra página web, y cuyo aspecto será parecido a este:

<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="422" src="https://www.youtube.com/embed/RqTq4fpX0Zs" width="750"></iframe>
 
Para finalizar, deberemos de coger el video y ponerlo dentro de 1 etiqueta de html <div> </div> o <p></p>, a la cual deberemos de añadirle la clase de CSS que antes hemos guardado en el archivo de hojas de estilo CSS, lo cual haremos poniendo la frase class="video-container" dentro de la etiqueta de apertura <div> o <p>, quedando el video de inserción tal y como podréis ver a continuación.

<p style="text-align: center;" class="video-container">

<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="422" src="https://www.youtube.com/embed/RqTq4fpX0Zs" width="750"></iframe>

</p>

O

<div class="video-container">

<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="422" src="https://www.youtube.com/embed/RqTq4fpX0Zs" width="750"></iframe>

</div>

Tras esto, debéis guardar el artículo, borrar la cache de vuestra página web y del navegador y veréis como vuestro video insertado se muestra siempre de una forma adaptable, lo cual podéis comprobar accediendo desde distintos móviles, ordenadores y tablets y veréis como el video siempre se adapta a todo tipo de resoluciones pudiéndose visionarse correctamente. En fin, espero que os haya gustado este articulo y que os haya sido de ayuda, y que así a partir de ahora podáis insertar videos y que estos se os vean correctamente. Si aun tuvierais alguna duda o simplemente quisierais contar vuestra opinión, no dudéis en hacerlo a través de un comentario, el cual os contestare en cuanto lo lea. A continuación, os voy a dejar unos enlaces a otros artículos relacionados con este que creo que pueden ser de vuestro interés, muchas gracias por vuestra visita y espero que volváis a visitarme muy pronto.

 

Como hacer SEO en Bing y Yahoo! para posicionar tu Web

Como hacer SEO en Google para posicionar una Web o Blog

Como hacer SEO en YouTube para posicionar vuestros videos

Escribir un comentario


Código de seguridad
Refescar