CODEWITHSUNDEEP
htmlvideoiframevimeomagnific-popup
Jah Mik
Jah Mik

Reputation: 1

Embed vimeo video using magnific popup

i am programming a website with Bootstrap and the family/forest one page template (on themeforest.net), i customized the portfolio section of this template to have a video popup when we click on the thumbnail (instead of a full image popup originally).

The popup works perfectly with the 'mfp-iframe' class and the 'video/video_name.mp4' href, so here the code:

I don't wanna use a mp4 video but a vimeo video and it s not working when i replace the href 'video/video_name.mp4' by a vimeo link 'https://vimeo.com/118901221' or a embed vimeo link 'https://player.vimeo.com/video/118901221'

Please somebody can help to resolve that issue.

Upvotes: 0

Views: 6988

Answers (2)

Carl Angelo Nievarez
Carl Angelo Nievarez

Reputation: 573

You just need the following codes below and try to analyze my problem about Vimeo last time MAGNIFIC-POPUP: Embed videos from Vimeo on my site using magnefic popup. If ever you encounter my problem in 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>

Upvotes: 1

fnune
fnune

Reputation: 5494

You need to supply the direct link to the video. In the case of vimeo, this is only available if you've paid for a premium account. A solution would be to re-upload the video to YouTube and then get the direct link by doing this:

  • Copy the full URL to the video on YouTube.
  • Install VLC Media Player and open it.
  • Hit Media (menu)... and Open Network Stream.
  • Paste your video URL there and hit Play.
  • Hit Tools (menu)... Media Information. You'll find the direct URL to the video there. Use this in your website.

If you want to actually embed from YT or vimeo, check this out:

$(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>

From the documentation. And this question.

Upvotes: 0

Related Questions