feat: enhance youtube iframes experience

Author: Lenugo

docs/Tropa/tercera-clase/8-pionerismo.mdx

@@ -1,6 +1,7 @@
 ---
 sidebar_position: 8
 ---
+import '@justinribeiro/lite-youtube';
 
 # Pionerismo
 
@@ -27,46 +28,59 @@ Como pasar esta prueba adecuadamente:
 
 Nudo rizo o llano, se emplea para unir dos cuerdas secas del mismo diámetro. No Se recomienda para unir cuerdas muy gruesas. Se emplea en los vendajes de primeros auxilios y atar paquetes o bultos. Este nudo es muy útil por ser un nudo plano, y por lo tanto no molesta.
 
-<iframe className="w-full md:w-[500px]" height="315" src="https://www.youtube.com/embed/ggJlaZa6mHc?si=iT5qhvS_WE8IhN-5" title="Nudo Rizo" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
-
+<div className="w-full md:w-[500px]">
+  <lite-youtube videoid="ggJlaZa6mHc" title="Nudo Rizo"></lite-youtube>
+</div>
 
 ### Nudo Vuelta de Escota Simple
 
 Se emplea para unir hilos o cuerdas de igual o diferente diámetro ya sean secas o mojadas. para amarrar un cable a una  argolla o para sujetar una cuerda a una presilla. Si una cuerda es más gruesa, ten cuidado de atar la delgada a ésta, y no al revés.
 
-<iframe className="w-full md:w-[500px]" height="315" src="https://www.youtube.com/embed/w1DpEdQT7O0?si=l6PI811N77KpC2RK" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
+<div className="w-full md:w-[500px]">
+  <lite-youtube videoid="w1DpEdQT7O0" title="Nudo Vuelta de Escota Simple"></lite-youtube>
+</div>
 
 ### Nudo Media Llave y Dos Cotes
 
 Sirve para sujetar una cuerda a un tronco, a una argolla o a otra cuerda, como cuando amarramos un bote o atamos un caballo. La tensión ha de hacerse en aángulo recto al tronco, de lo contrario corres el peligro de que la cuerda se deslice a lo largo del tronco.
 
-<iframe className="w-full md:w-[500px]" height="315" src="https://www.youtube.com/embed/4Lu0D0meF80?si=yIUZ0fmvyzjp4Tk_" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
+<div className="w-full md:w-[500px]">
+  <lite-youtube videoid="4Lu0D0meF80" title="Nudo Media Llave y Dos Cotes"></lite-youtube>
+</div>
 
 ### Nudo Pescador
 
 Como lo indica su nombre, es un nudo usado por los pescadores para unir sus sedales para pescar. Puedes emplearlo para unir cordeles delgados sobre todo si son resbalosos. Recuerda que al secarse se aprieta.
 
-<iframe className="w-full md:w-[500px]" height="315" src="https://www.youtube.com/embed/HnKa6iejUr0?si=zu5H4qfuYSYpeZGs" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
+<div className="w-full md:w-[500px]">
+  <lite-youtube videoid="HnKa6iejUr0" title="Nudo Pescador"></lite-youtube>
+</div>
 
 ### Nudo Ballestrinque
 
 Es un nudo inicial y final de algunos amarres. Sirve para atar una cuerda alrededor de postes, maderos, etc... 
 También para entablillar piernas, atar las argollas de las tiendas de campaña a las estacas, entre otros usos. Este nudo se puede aflojar si la tensión no es constante, por eso conviene asegurarlo.
 
-<iframe className="w-full md:w-[500px]" height="315" src="https://www.youtube.com/embed/qf8aQH8HRCk?si=WAw65dUP-k8z1R3g" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
+<div className="w-full md:w-[500px]">
+  <lite-youtube videoid="qf8aQH8HRCk" title="Nudo Ballestrinque"></lite-youtube>
+</div>
 
 ### Nudo Margarita
 
 Es utilizado para reducir la longitud de una cuerda, sin necesidad de costarla. También se emplea para evitar la tensión a una parte de la cuerda que amenaza con romperse. Se hace más seguro pasando los extremos por los ojillos.
 aprender este nudo debes considerar que estás empleando una cuerda larga por lo tanto no debes usar ninguno de los extremos.
 
-<iframe className="w-full md:w-[500px]" height="315" src="https://www.youtube.com/embed/87GuMdoBxyw?si=e-bgxfBan76Q8pbj" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
+<div className="w-full md:w-[500px]">
+  <lite-youtube videoid="87GuMdoBxyw" title="Nudo Margarita"></lite-youtube>
+</div>
 
 ### Nudo As de Guía
 
 Es un lazo fijo sumamente seguro que una vez ajustado no se corre. Se usa en casos de salvamento para bajar a una persona de un edificio o sacarla de un barranco; Para hacer la gaza de enlazar, para amarrar animales sin que se ahoguen por la presión. Aprende a hacerlo alrededor de tu cintura y de otra persona.
 
-<iframe className="w-full md:w-[500px]" height="315" src="https://www.youtube.com/embed/yLxisOKD2ho?si=-JEMhzKogbw-2L0U" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
+<div className="w-full md:w-[500px]">
+  <lite-youtube videoid="yLxisOKD2ho" title="Nudo As de Guía"></lite-youtube>
+</div>
 
 #### Bibliografías y Referencias: 
 

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@docusaurus/core": "3.3.2",
     "@docusaurus/preset-classic": "3.3.2",
+    "@justinribeiro/lite-youtube": "^1.7.1",
     "@mdx-js/react": "^3.1.0",
     "clsx": "^2.1.1",
     "prism-react-renderer": "^2.4.0",