How to embed YouTube (and other) videos?


(Curtis Schiewek) #1

So I’ve searched and found threads related to issues with youtube embeds, but I can’t seem to find how to do it? I’ve tried straight up iframes and that doesn’t work. Help please :slight_smile:


A basic Discourse archival tool
(Brentley Jones) #2

If you put a link to something on it’s own line, it becomes a onebox. Below I put this: PSY - GANGNAM STYLE(강남스타일) M\/V on one line.

More info on oneboxes:

http://meta.discourse.org/t/what-is-a-onebox/4546


(Curtis Schiewek) #3

Thanks! I’ve read through a bunch of docs and FAQs but never came across this. Much appreciated.


(Jeff Atwood) #4

Since this works with the preview, and “paste a link” is a very common Internet activity, our thinking was that most folks would figure it out via experimentation – or watching others do it.


(Curtis Schiewek) #5

I agree, “oneboxing” is a pretty great feature and the implementation is very intuitive. My problem was that I’ve been “trained” by all the forums systems that use BBCode to assume I’d have to wrap a link with something to get it embedded.


#6

One suggestion regarding embedding videos.

The default width is 480.

I think that youtube now is using other default (640) and looks better.

Would be great if the default width is 640.


Variable width using the Youtube Onebox, which is currently fixed
(Jeff Atwood) #7

Maybe – but that also makes the video quite a bit taller, and more bandwidth intensive when loaded. Wouldn’t you just click through if you wanted to see it larger or use the fullscreen controls in the YouTube embed?


#8

The idea is to keep people on your community, if they go to youtube, probably, that they will not come back.


(Jeff Atwood) #9

I don’t know if I agree with that.

I often bring up YouTube videos I find elsewhere in a new tab, or even make them fullscreen, but I don’t view that as the job of the website I found the video on. It’s common to find videos at modest resolution and want to see a bigger version, easiest to do that by clicking through to YouTube in a new tab. And most videos I find I want to “screen” first at low resolution so it loads fast and I can see if this is even a video I want to check out at all, if it warrants further viewing.

Now for embedded JPG / GIF / PNG images, it’s a different story, we are adding robust support for lightboxing images. But images aren’t the mental commitment that a 2 or 5 or 10 minute video is, either!


(lunchtime) #10

I was going to post a new thread about how to make youtube videos embed bigger (to better fit the post), but @dan_fleet clued me into this, so I’ll post on here.

My first question is: why is it that the embed on Discourse is even smaller than the smallest youtube video window. Why not at the very least make it as big as their default video size?

I think that the argument about making it taller is a bit of a stretch. This is modern software; and I feel many, if not most people using it have monitors that possess a decent enough resolution where a little bit of extra vertical height won’t make much of a difference.

As far as navigating off the page goes, it seems strange to have an embed in the first place if the intention is to have people go to youtube. I think you should be able to have a good viewing experience with these embeds rather than having to go to youtube (or fullscreen). I understand this is how some people use it, but not everyone is the same. I guess my point is people should have a choice of how they want to view the content and right now the youtube embeds are almost thumbnail-like.

Going to add @Ajarn on this as well.


(Dan Fleet) #11

My concern is as screen resolutions increase in the coming years (4k go!) and/or tablets have immensely large ppi ratings, this will get worse.

A question though: is it reasonable to have the iframe that is rendered for youtube (or other video/embedded objects) to be rendered with a style class? Then out of the box Discourse could would have a default that a forum runner could use the customization to override. (note that you can do this now by providing a blanket custom style that applies to all iframe elements but that’s a bit of overkill).


(lunchtime) #12

@dan_fleet got it to work nicely with this stylesheet code (the youtube video pretty much fills the entire post width now)… Does discourse use any other iframe stuff that this could potentially break?

iframe { width: 693px !important; height: 390px !important; }


(MrModz) #14

thanks… this is what im looking for…


#15

Instead of using an iFrame, I think a better approach will be to modify the onebox that youtube uses.


(Dan Norris) #16

Agree @PabloC the shape of the video looks odd. I don’t want people clicking to leave the site to watch it at the standard size.


(Dan Norris) #17

Is it possible for those of us with installations that can’t be customized to embed youtube vids at the normal size? I’ve tried the embed code, tried adding a css customization both just displayed nothing.


#18

Yep, there is not reason to have a smaller window, it is annoying.

I think the best approach is to fork Discourse and modify youtube’s onebox to have a different width. It is not something complex todo.


(Sam Saffron) #19

I much prefer plugins to forks


#20

Any tip or idea about how to make a pluging to change youtube’s default size?

I’m not sure exactly where is the 480 size default coming from.

Tks!


(Leonardteo) #21

Hi guys,

I think we figured it out!

  1. Admin > Content.

  2. In HTML Head, put this script in. It will load FitVids and set up Discourse to run it.

Code: Discourse FitVids to maximize size of video embeds · GitHub