How to Embed YouTube Videos in a row

Sharing is caring!

Disclosure: Please note that this article may contain affiliate links. You can read my full disclosure here.
    Need help with the Tech-side of blogging? Join my Facebook Group and get some answers.
~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~

For this example, I just chose three YouTube videos of Tributes I enjoy by Skillet and Thousand Foot Krutch. You can play the videos in the small screen, or open up to full screen.

 

Here is the HTML & CSS code

Make sure you using the Classic Editor, Text tab or see below for Gutenberg instructions.
screenshot of Classic editor text tab

<style>
div.full-width {position:relative;float:left;width:100%;}
@media screen
and (min-width: 751px), screen and (min-device-width:751) {
div.video {position:relative;float:left;padding:5px;width:30%;}
iframe {width:100%;}
}
}
</style>
<div class="full-width">
<div class="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/H7jtQfFtEFw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/hxqW1Eq0iP4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/00HDK51C5BI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</div>

 

 

Working in the Gutenberg Editor

First add the Custom HTML block
Selecting the Gutenberg custom html block

Then add your code, make sure the quotations appear straight up and down, if they are the fancy quotes, the code will not work.

See this example showing the fancy curly or slanted quotes, the Gutenberg and Classic editor will ignore these, and you will get weird output.
Screenshot showing curly or slanted quotes

So you need to delete them and re-type the quotation mark, so it appears straight up and down like this for every spot where their is a quotation: "

A trick I use, is to paste the code into notepad, this is program that comes with Windows free, needs to be notepad not wordpad or Microsoft Word these will not work for this step. Copy and paste the code there, and if there are any curly or slanted quotes, I copy one and then click edit on the menu and select replace, I’ll paste the curly or slanted quote in the find box, and type in the straight quote in the replace box and then click replace all

It is pretty difficult to see in this screenshot, but this is what I do here:
Screenshot of Notepad copy replace

It is a great time saver if you need to replace the same thing in multiple locations.

If you find your theme is causing an issue or you have trouble, and would like some help, check out my services page and we can book a time for a remote screenshare session.

Got blogging questions? Join my Facebook group here WP Blogger Assist Questions Advanced WordPress user with coding knowledge? Advanced Coding on WordPress
Avatar for Tara, WP Blogger Assist

Tara, WP Blogger Assist

I have over 15 years experience in IT. Over this time: managing server infrastructure, building websites and more. This website is dedicated to helping WordPress bloggers with setting up their blogs and websites; optimizing fast page loading, SEO and social media marketing - such as; Pinterest, Facebook and more.

2 thoughts on “How to Embed YouTube Videos in a row

  • Avatar for Kumar Kauhsal
    December 3, 2019 at 1:49 am
    Permalink

    I am not able to put Youtube videos in a row. Whenever I add new video it just comes below the first video. Kindly help.

    Reply
    • Avatar for Tara - WP Blogger Assist
      December 3, 2019 at 11:50 pm
      Permalink

      Hi Kumar, did you use the html code from this post and then switch to your YouTube videos?

      If you have the post public I can try taking a look if you want to share the URL.

      Thank you

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *