/ / Osadź wideo vimeo za pomocą wyskakującego okienka - html, wideo, iframe, vimeo, magnific-popup

Osadzanie wideo vimeo za pomocą magnific popup - html, wideo, iframe, vimeo, magnific-popup

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 № 1

Po 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.