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!
mel200Asked:
Who is Participating?
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.

mel200Author 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.
0
dgrafxCommented:
I think you should use the YouTube version of MediaElement Player.
Visit this link to try out a demo: http://mediaelementjs.com/
0
mel200Author Commented:
Thanks, I'll try that. I'm also looking at fancybox.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

mel200Author Commented:
That doesn't seem like a pop-up. I think I'll use fancybox. Thanks.
0
mel200Author 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
0
dgrafxCommented:
Of course mediaelement js isn't a popup !!!
So whatever you're thinking ???
Good luck with that ...
0
mel200Author Commented:
Well, that was what I had asked for, so your answer didn't help me. Thanks anyway.
0
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>
0
mel200Author Commented:
Thanks, Vaibhav, I will try that!
0
mel200Author Commented:
That isn't working, probably I am doing it wrong? http://clinica-americas.com/video-test3.html
0
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>
0

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
mel200Author 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!
0
mel200Author Commented:
Great answer, didn't entirely solve the problem.
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.