Ich programmiere eine Website mit Bootstrap und demfamilie / wald einseitige vorlage (auf themeforest.net), ich habe den portfolio-abschnitt dieser vorlage angepasst, um ein video-popup zu haben, wenn wir auf das thumbnail klicken (anstelle eines originalen bild-popups).
Das Popup funktioniert perfekt mit der "mfp-iframe" Klasse und der "video / video_name.mp4" href, also hier der Code:
Ich möchte kein mp4-Video, sondern ein Vimeo-Video verwenden und es funktioniert nicht, wenn ich die href "video / video_name.mp4" durch einen Vimeo-Link ersetze.https://vimeo.com/118901221"oder einen eingebetteten Vimeo-Link"https://player.vimeo.com/video/118901221"
Bitte jemand kann helfen, dieses Problem zu beheben.
Antworten:
1 für die Antwort № 1Sie brauchen nur die folgenden Codes und versuchen, mein Problem mit Vimeo beim letzten Mal zu analysieren MAGNIFIC-POPUP: Betten Sie Videos von Vimeo mit Magnefic Popup auf meiner Website ein. Wenn Sie jemals auf mein Problem in Vimeo stoßen.
<!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 für die Antwort № 2
Sie müssen die liefern direkte Verbindung zum Video. Im Falle von vimeo ist dies nur verfügbar, wenn Sie für ein Premium-Konto bezahlt haben. Eine Lösung wäre, das Video erneut auf YouTube hochzuladen und dann den direkten Link zu erhalten:
- Kopiere die vollständige URL in das Video auf YouTube.
- Installieren Sie den VLC Media Player und öffnen Sie ihn.
- Hit Media (Menü) ... und Open Network Stream.
- Fügen Sie dort Ihre Video-URL ein und klicken Sie auf "Abspielen".
- Klicken Sie auf Extras (Menü) ... Medieninformationen. Dort finden Sie die direkte URL zum Video. Verwenden Sie diese auf Ihrer Website.
Wenn Sie tatsächlich von YT oder vimeo einbetten möchten, lesen Sie Folgendes:
$(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>
Von dem Dokumentation. Und diese Frage.