How to embed a Youtube video in a post

[luisam]

I would appreciate some help to explain me the steps o show me a link where it's explained, about how to embed a link to a Youtube video in this forum, to illustrate a post. In other forums where i have posted, I used the BB code but here it's different.

[mclaren85]

Just paste the link. It will automatically recognized.

[vissha]

6 hours ago, mclaren85 said:

Just paste the link. It will automatically recognized.

That doesn't look good. Reason: the video is not centered. Hence, the below workaround needed.

 

@luisam: Here are the steps for best embed video + centering:

1. Paste the URL and make it embedded automatically.
2. Go to source and note the height and width.
3. Now, in source, replace the embedded div with below template and replace - ENTER YOUTUBE VIDEO URL CODE, height & width accordingly which was default[auto-embed].
   
   <p style="text-align: center;">
       <iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/ENTER YOUTUBE VIDEO URL CODE?feature=oembed" width="640"></iframe>
   </p>

Note: This is applicable for any embed video source. Not limited to YouTube. If you want to use for any other video source, replace the whole URL from above embed code.

The "YOUTUBE VIDEO URL CODE" is nothing but alphanumeric code at the end of YouTube Video URL.

Also, I've been using this method for almost an year.

 

Or you could try the simpler workaround using "center" by @DKT27. Note that you should enter space before and after the URL to work perfectly. Here is how:

[center] https://youtu.be/xbK0C9AYMd8 [/center]

 

[luisam]

4 minutes ago, vissha said:

That doesn't look good. Reason: the video is not centered. Hence, the below workaround needed.

 

@luisam: Here are the steps for best embedded video centering:

1. Paste the URL and make it embedded automatically.
2. Go to source and note the height and width.
3. Now, in source, replace the embedded div with below template and replace - ENTER YOUTUBE VIDEO URL, height & width accordingly which was default[auto-embed].
   
   <p style="text-align: center;">
       <iframe allowfullscreen="" frameborder="0" height="360" src="ENTER YOUTUBE VIDEO URL?feature=oembed" width="640"></iframe>
   </p>

Note: This is applicable for any embed video source. Not limited to YouTube.

 

Great help, but in the post

somehow the script text shows

<p style="text-align: center;">
    <iframe allowfullscreen="" frameborder="0" height="360" src="

What's wrong?

 

[vissha]

5 hours ago, luisam said:

 

Great help, but in the post

somehow the script text shows

<p style="text-align: center;">
    <iframe allowfullscreen="" frameborder="0" height="360" src="

What's wrong?

I've edited the above reply again. The problem is you should expand the YouTube short URL "youtu.be/" to "www.youtube.com/embed/".

 

@luisam I just checked your edited thread video and you are doing it wrong. You edited auto-embed codes instead of workaround values.

Here is how to do it perfectly:

1. When you paste the video link and press enter, you get this in source:
   <div class="ipsEmbeddedVideo ipsEmbeddedVideo_limited" contenteditable="false">
       <div>
           <iframe allowfullscreen="true" frameborder="0" height="344" src="https://www.youtube.com/embed/xbK0C9AYMd8?feature=oembed" width="459"></iframe>
       </div>
   </div>
2. In a new line, paste my workaround.
3. Now, you should edit the workaround with the values from auto-embed codes.
4. Note that you remove the auto-embed codes completely. There should be no <div> contents in embed video codes.
5. Let me show you how to modify. Remove the complete thing from your thread reply and add this in source:

<p style="text-align: center;">
    <iframe allowfullscreen="" frameborder="0" height="344" src="https://www.youtube.com/embed/xbK0C9AYMd8?feature=oembed" width="459"></iframe>
</p>

 

Once you Make the appropriate changes, you'll get it right and centered video.

 

Or you could try the simpler workaround using "center" by @DKT27. Note that you should enter space before and after the URL to work perfectly. Here is how:

[center] https://youtu.be/xbK0C9AYMd8 [/center]

 

[DKT27]

Do this:

 

Quote

[ center ] Insert URL here [ / center ]

 

Having said, there are not many reasons to center the video though.

 

@vissha: For many reasons, the Source button is only available for ViPs and above here.