How to Embed YouTube Videos in a row
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.
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
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.
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:
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.
