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!
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!
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!
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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.
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/
Visit this link to try out a demo: http://mediaelementjs.com/
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
Hi, this was never really answered, I came up with my own answer
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').magnificPop
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>
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').magnificPop
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>
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(fun
videoModal.load();
var videoUrl = $(this).attr('href');
var flashvars = {};
var params = {
allowFullScreen: "true",
allowscriptaccess: "always"
};
var attributes = {};
swfobject.embedSWF(videoUr
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.getElementB
if (!popvid||popvid.closed) {
popvid=window.open('','vi
}
popvid.document.body.style
popvid.focus();
popvid.document.body.inner
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
<embed style="width:400px; height:326px;" id="VideoPlayback"
type="application/x-shockw
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>
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(fun
videoModal.load();
var videoUrl = $(this).attr('href');
var flashvars = {};
var params = {
allowFullScreen: "true",
allowscriptaccess: "always"
};
var attributes = {};
swfobject.embedSWF(videoUr
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.getElementB
if (!popvid||popvid.closed) {
popvid=window.open('','vi
}
popvid.document.body.style
popvid.focus();
popvid.document.body.inner
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
<embed style="width:400px; height:326px;" id="VideoPlayback"
type="application/x-shockw
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>
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!
http://clinica-americas.com/videotest3.html
I appreciate your time, and I'll use this in other projects!
Premium Content
You need an Expert Office subscription to comment.Start Free Trial