Video Embedding

[Lethe]

I'm linking some YouTube gameplay videos and trailers on the shrine I'm currently working on, and I was wondering what you all think about how to include videos. I know that for this project, I do NOT want to directly use the <video> tag to insert them as an element on a page because it wouldn't go well with my site's aesthetics.

So far, I'm linking videos as a regular link (no target="_blank" either so that visitors can choose for themselves how they open the links), but I remember that you can also embed videos in a way that they... open as a pop-up in the same tab (like lightbox/fancybox gallery images). My questions are:

1. How do I do that? Is there some convenient code snippet for that, or do I have to combine stuff (like, grab the YT iframe embed code, or use the video tag, and then somehow mix that with fancybox)? You don't have to explain the entirety of it to me if you don't feel like it, but I'm at a loss as to what I have to google in the first place to find a tutorial. Just give me the keywords? XD
2. Is that a good way to include videos on your sites in the first place, or would it be better to just leave them as conventional links? The reason I want to do it this way is because I think it's more convenient for the visitor, not having to open and close a tab or hit the back button, and that the visitor gets less distracted if they stay on my site when briefly checking out a video. But I don't know much in terms of browser support, required plug-ins, accessibility, etc. so I thought I'd ask.

Any help would be greatly appreciated!

[Masao]

I think using a pop-up would work fine. Fancybox has options to embed an iframe of the youtube video. I'm on mobile, lol but I can link you code later if you need it.

[Lethe]

o-omg I... totally didn't know fancyBox itself offered a snippet for that. Thank you, Masao, I found it!!

[Lethe]

I can't get it to work and I don't know what I'm doing wrong... ;_; (I've set up fancyBox for image galleries before though.)

The instructions are here, the code snippet for the video is under Media Helper (right before the License heading).

I put this into the head of the page:

Code: Select all

<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen">

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<script type="text/javascript">
$(document).ready(function() {
	$('.fancybox-media').fancybox({
		openEffect  : 'none',
		closeEffect : 'none',
		helpers : {
			media : {}
		}
	});
});
</script>

as the instructions say, and this as the link (copied from examples):

Code: Select all

<a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Youtube</a>

[Masao]

I think you need to link to the embed url. From their example:

Code: Select all

	<script>
		$(document).ready(function() {
			$('.fancybox').fancybox();
		});
	</script>

<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>

Not sure why the media helper isn't working, but I tested this and it should work.

[Lethe]

I see. D: I skipped the iframe part that came before the Media Helper thing (not that I know what the difference is), assuming that the latter was more specialized, so I hadn't tried out that code. It works now, thank you so much!

[Elysa]

I know this problem was already solved, but I just wanted to add another suggestion! You could also use the animated collapse script to hide videos from the page until you specifically open it, like I've done on my SHINee site. :3

[Lethe]

Good alternative! :D

By the way, for anyone who comes across this topic later... The Media Helper works, but I forgot to declare in the head that the file for that needs to be included (since it's a separate file). The site with all the demo and snippets lists that at the top of the page, but doesn't repeat it later on.