Youtube video on site without embedding

Melody Scott
Melody Scott used Ask the Experts™
on
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!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

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.
I think you should use the YouTube version of MediaElement Player.
Visit this link to try out a demo: http://mediaelementjs.com/

Author

Commented:
Thanks, I'll try that. I'm also looking at fancybox.
Ensure you’re charging the right price for your IT

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

Author

Commented:
That doesn't seem like a pop-up. I think I'll use fancybox. Thanks.

Author

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
Of course mediaelement js isn't a popup !!!
So whatever you're thinking ???
Good luck with that ...

Author

Commented:
Well, that was what I had asked for, so your answer didn't help me. Thanks anyway.
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>

Author

Commented:
Thanks, Vaibhav, I will try that!

Author

Commented:
That isn't working, probably I am doing it wrong? http://clinica-americas.com/video-test3.html
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>

Author

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!

Author

Commented:
Great answer, didn't entirely solve the problem.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial