Ayuda en la programación, respuestas a preguntas / Html / Incrustar video vimeo usando magnific popup - html, video, iframe, vimeo, magnific-popup

Incruste video vimeo usando magnific popup - html, video, iframe, vimeo, magnific-popup

Estoy programando un sitio web con Bootstrap y elPlantilla de una página de familia / bosque (en themeforest.net), personalicé la sección del portafolio de esta plantilla para tener una ventana emergente de video cuando hacemos clic en la miniatura (en lugar de una ventana emergente de imagen completa originalmente).

La ventana emergente funciona perfectamente con la clase "mfp-iframe" y el "video / video_name.mp4" href, así que aquí está el código:

No quiero usar un video mp4 sino un video vimeo y no funciona cuando reemplazo el archivo href "video / video_name.mp4" por un enlace vimeo "https://vimeo.com/118901221"o un enlace de vimeo incrustado"https://player.vimeo.com/video/118901221"

Por favor alguien puede ayudar a resolver ese problema.

Respuestas

1 para la respuesta № 1

Solo necesita los siguientes códigos a continuación e intente analizar mi problema sobre Vimeo la última vez MAGNIFIC-POPUP: incrustar videos de Vimeo en mi sitio usando Magnefic Popup. Si alguna vez encuentras mi problema en Vimeo.

 <!DOCTYPE html>
<html>

<head>
<title></title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Fontawesome -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Magnific Popup CSS-->
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
</head>

<body>


<a class="vimeo-video-1" href="#">CLICK ME TO POP-UP 1 VIDEP</a><br>

<a class="vimeo-video-more" href="#">CLICK ME TO POP-UP MORE VIDEO</a>

<!--Jquery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- Magnific Popup JS -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
</body>

</html>

<script type="text/javascript">
$(".vimeo-video-1").magnificPopup({
items: [
{
src: "https://player.vimeo.com/video/118901221",
type: "iframe" // this overrides default type
}],
gallery: {
enabled: false
},
type: "image"
});

//MORE VIMEO VIDEO
$(".vimeo-video-more").magnificPopup({
items: [
{
src: "https://player.vimeo.com/video/118901221",
type: "iframe" // this overrides default type
},
{
src: "https://player.vimeo.com/video/211690338",
type: "iframe" // this overrides default type
},],
gallery: {
enabled: true
},
type: "image"
});
</script>

0 para la respuesta № 2

Debe suministrar el enlace directo al video. En el caso de vimeo, esto solo está disponible si has pagado por una cuenta premium. Una solución sería volver a subir el video a YouTube y luego obtener el enlace directo haciendo esto:

Copia la URL completa al video en YouTube.
Instale VLC Media Player y ábralo.
Pulse Medios (menú) ... y Abrir flujo de red.
Pega la URL de tu video allí y pulsa Play.
Pulse Herramientas (menú) ... Información multimedia. Encontrará la URL directa al video allí. Use esto en su sitio web.

Si realmente quieres incrustar desde YT o vimeo, mira esto:

$(document).ready(function() {
$(".popup-youtube, .popup-vimeo, .popup-gmaps").magnificPopup({
disableOn: 700,
type: "iframe",
mainClass: "mfp-fade",
removalDelay: 160,
preloader: false,

fixedContentPos: false
});
});

<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a>

Desde el documentación. Y esta pregunta.