programuję stronę internetową z Bootstrap iszablon strony rodzinnej / leśnej (na themeforest.net), dostosowałem sekcję portfolio tego szablonu, aby wyświetlić okienko wideo po kliknięciu miniatury (zamiast oryginalnego pełnego wyskakującego obrazu).
Popup działa idealnie z klasą „mfp-iframe” i href „video / video_name.mp4”, więc tutaj kod:
Nie chcę używać wideo mp4, ale wideo vimeo i nie działa, gdy zastępuję href „video / video_name.mp4” linkiem vimeo ”https://vimeo.com/118901221„lub osadzony link vimeo”https://player.vimeo.com/video/118901221"
Proszę, ktoś może pomóc w rozwiązaniu tego problemu.
Odpowiedzi:
1 dla odpowiedzi № 1Po prostu potrzebujesz poniższych kodów i spróbuj przeanalizować mój problem o Vimeo ostatnim razem MAGNIFIC-POPUP: Osadzaj filmy z Vimeo na mojej stronie za pomocą magne popup. Jeśli kiedykolwiek spotkasz mój problem w 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 dla odpowiedzi nr 2
Musisz dostarczyć link bezpośredni na wideo. W przypadku vimeo jest to dostępne tylko, jeśli zapłaciłeś za konto premium. Rozwiązaniem byłoby ponowne przesłanie filmu do YouTube, a następnie uzyskanie bezpośredniego linku, wykonując to:
- Skopiuj pełny adres URL do filmu na YouTube.
- Zainstaluj VLC Media Player i otwórz go.
- Hit Media (menu) ... i Otwórz strumień sieci.
- Wklej tam swój adres URL wideo i naciśnij Odtwórz.
- Hit Tools (menu) ... Media Information. Znajdziesz tam bezpośredni adres URL do filmu. Użyj tego w swojej witrynie.
Jeśli chcesz osadzić w YT lub vimeo, sprawdź to:
$(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>
Od dokumentacja. I to pytanie.