1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Magnific Popup to play video...

Discussion in 'JavaScript' started by Brian123, Apr 13, 2014.

  1. #1
    Hi.

    I am using a script that can upload embedded video to the site. It uses the magnific-popup JS.
    However, it will only upload from YouTube and Vimeo.
    Can anyone help me make it work so it will load any video... this will mainly be from "tube sites".
    Thanks.

    Current Code:
    SEMrush
    // we don't care and support only one default type of URL by default
            patterns: {
                youtube: {
                    index: 'youtube.com',
                    id: 'v=',
                    src: '//www.youtube.com/embed/%id%?autoplay=1'
                },
                vimeo: {
                    index: 'vimeo.com/',
                    id: '/',
                    src: '//player.vimeo.com/video/%id%?autoplay=1'
                },
                gmaps: {
                    index: '//maps.google.',
                    src: '%id%&output=embed'
                }
            }
        },
    
    Code (markup):
    Thanks in advance.
     
    Brian123, Apr 13, 2014 IP
    SEMrush
  2. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    115
    #2
    I need to see the code used to display the embedded content which will most likely be done with the <object> tag. Can you post that code?

    Adding a new embed type shouldn't be difficult as long as the host wants you to.
     
    HuggyStudios, Apr 15, 2014 IP
    Brian123 likes this.
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,433
    Likes Received:
    1,509
    Best Answers:
    220
    Trophy Points:
    515
    #3
    Pretty much sounds like you're using JS to do things that shouldn't even HAVE JS involved... The popup? Yeah, that's something you do in JS -- creating the video OBJECT/EMBED/VIDEO tags from the scripting (which is what that garbage you posted for code looks to be doing)? NOT SO MUCH.

    Whatever this "Magnific" thing is? Doesn't look good so far... do yourself a favor and pitch it in the trash.

    Make your OBJECt/VIDEO tags in the markup properly/normally, and then use scripting to enhance those proper tags for the popup. That SHOULD make it possible to have the video source be from just about anywhere.

    Building those with the scripting means no graceful degradation and being tied to whatever video sources the script is hardcoded to support; defeating the entire point of even working in HTML in the first place!
     
    deathshadow, Apr 15, 2014 IP
    Brian123 likes this.
  4. Brian123

    Brian123 Well-Known Member

    Messages:
    783
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    108
    #4
    Here is where you can find the full source code: http://dimsemenov.com/plugins/magnific-popup/ (Popup with video or map).
    I'm not 100% confident with coding, but I will give it a go... I just cannot understand why I can't get it to play video from other sources?
    Thanks for your help.
     
    Brian123, Apr 15, 2014 IP
  5. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,627
    Likes Received:
    716
    Best Answers:
    151
    Trophy Points:
    420
    #5
    Basically what @deathshadow said - you encode your video files on the page, in normal HTML, and use javascript to add to that code - for instance you can use javascript to hide the videos on the page itself, and just display a thumbnail or link to it, which, when clicked, will open a popup (or, rather, a floating div) and display the video file. This is fairly simple, and shouldn't need any fancy scripting. I mostly use jQuery, and this would be possible to do with fairly short lines of code, in about 5-6 lines.
     
    PoPSiCLe, Apr 15, 2014 IP
    Brian123 likes this.
  6. ketting00

    ketting00 Active Member

    Messages:
    671
    Likes Received:
    13
    Best Answers:
    3
    Trophy Points:
    68
    #6
    I think you need something simple to begin with.

    How about trying something like this instead: http://fancybox.net/vimeo

    Hope that would help.
     
    ketting00, Apr 15, 2014 IP
    Brian123 likes this.
  7. Brian123

    Brian123 Well-Known Member

    Messages:
    783
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    108
    #7
    Thanks for your help guys... I'll play around with it. I'll look at the HTML side and see if I can figure it out.
    Like I said, I'm no expert on this sort of thing, but I would love to be able to "do it".
    I'm sure the more I mess around with it, the more I will learn...
     
    Brian123, Apr 16, 2014 IP