Youtube video on site without embedding

Hi, My client wants this on his site: http://www.citicinemas.com/movies/958  click on ver trailer on the left.

So the youtube video opens in a pop up window, and it looks like it's not embedded. It's nice.

So questions are:
1. Am I right, is it not embedded?
2. Can I replicate this, and how?

Thanks for your help!
Melody ScottAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Melody ScottAuthor Commented:
Hi, I have colorbox on this page now, I think it should work:
http://clinica-americas.com/video-test.html

I have colorbox.css linked properly, and jquery.colorbox.js is linked as well. I also have <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

I have the script in the header that they show on the demo page here: http://www.jacklmoore.com/colorbox/example1/

And I am using the exact link they show for youtube in the demo page:
<p><a class='youtube' href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&wmode=transparent">Flash / Video (Iframe/Direct Link To YouTube)</a></p>

But it isn't working. I'll continue to work on it, to see what I am missing, but a little help would be great as well! Thanks.
dgrafxCommented:
I think you should use the YouTube version of MediaElement Player.
Visit this link to try out a demo: http://mediaelementjs.com/
Melody ScottAuthor Commented:
Thanks, I'll try that. I'm also looking at fancybox.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Get Your eBook
Melody ScottAuthor Commented:
That doesn't seem like a pop-up. I think I'll use fancybox. Thanks.
Melody ScottAuthor Commented:
I've requested that this question be deleted for the following reason:

Hi, this was never really answered, I came up with my own answer
dgrafxCommented:
Of course mediaelement js isn't a popup !!!
So whatever you're thinking ???
Good luck with that ...
Melody ScottAuthor Commented:
Well, that was what I had asked for, so your answer didn't help me. Thanks anyway.
Vaibhav BaggaCommented:
Hi

Might be you can execute this process via of Jquery. Use this following code, I hope it helps you to add the YouTube pop up window
Demo code:-
$(document).ready(function() {
    $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
        disableOn: 720,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 180,
        preloader: false,

        fixedContentPos: false
    });
});

<a class="popup-youtube" href="http://www.youtube.com/watch?v=64+664kdsfkbc">Open YouTube video</a>
Melody ScottAuthor Commented:
Thanks, Vaibhav, I will try that!
Melody ScottAuthor Commented:
That isn't working, probably I am doing it wrong? http://clinica-americas.com/video-test3.html
Vaibhav BaggaCommented:
Hi,

Ohhh Shut, Last time our team apply this and its work fruitfully, but don't worry I have a couple of more procedures its little bit lengthy if you want so try it I' m pretty sure it helpful
Number 1 procedure:-

<a href="http://www.youtube.com/v/2cxqZiWyW3g&hl=en_US&fs=1&autoplay=1"
    class="video-link">Video 1</a>

<div class="modal" id="video-modal">
    <div id="video-container" style="width: 425px; height: 344px;"></div>
</div>

<script language="javascript" type="text/javascript">

    $(function() {
        var videoModal = $('#video-modal').overlay({
            expose: {
                color: 'black',
                loadSpeed: 200,
                opacity: 0.85
            },
            closeOnClick: true,
            api: true
        });

        $('.video-link').click(function() {
            videoModal.load();

            var videoUrl = $(this).attr('href');
            var flashvars = {};
            var params = {
                allowFullScreen: "true",
                allowscriptaccess: "always"
            };
            var attributes = {};

            swfobject.embedSWF(videoUrl, 'video-container', '425', '344', '9.0.0', '', flashvars, params, attributes);

            return false;
        });
    });

</script>

If you don't like it then you can follow it

Number 2) Procedure
A) apply this code under <head> </head>
Like:

<head>
<script type="text/javascript">
var popvid = null;                          // will store the window reference

function popWin(divId) {
   if (typeof(divId)=='string') { divId=document.getElementById(divId); }
   if (!popvid||popvid.closed) {
      popvid=window.open('','vidplayer','width=450,height=390,status=no');
   }
   popvid.document.body.style.backgroundColor='black';
   popvid.focus();
   popvid.document.body.innerHTML='<BR><center>'+divId.innerHTML+'</center>';
   return false;
}

window.onunload=function() {
   // if the user is navigating away from the page, check to see if we
   // opened a video window and if we did, make sure it's closed.
   if (popvid) {
      popvid.close();
   }
}

</script>
</head>

B) Now required to wrap the embedded video in a division. This will make a simple style to hide the contents, making them invisible on the page. The id will also have to be unique. You can place the below code anywhere in you code but not in the <head>

<div id='popvid1'style='display: none'>
   <embed style="width:400px; height:326px;" id="VideoPlayback" 
   type="application/x-shockwave-flash" 
   src="http://video.google.com/googleplayer.swf?docId=7066578568747223192&autoplay=1" 
   flashvars=""> </embed>
</div>


This is just an ordinary video embed code copied and pasted from the video service (Google in this case) to your web page, and then wrapped in a simple<div> tag. 

C) Now add it where you want to place video:

<A HREF="url here" onclick="return popWin('popvid1');" class=popup>picas</A>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Melody ScottAuthor Commented:
Hi, thanks. it works, but doesn't solve my problem, as I need to not use embed code:

http://clinica-americas.com/videotest3.html

I appreciate your time, and I'll use this in other projects!
Melody ScottAuthor Commented:
Great answer, didn't entirely solve the problem.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.