Can I embed two YouTube videos side by side on one page?

Store Design
1

I would like to add 2 Youtube videos, side-by-side, into a page on my site. Is this even possible, first of all? Second, I think I have the working of the correct code (if it even is possible), but something is still not right as the second video shows an error.

shopify02.JPG
shopify02.JPG1847Ă—782 142 KB

The code I used was this:

<style>
*
{
  box-sizing: border-box;
}
body {
  margin: 0;
}
.image-container {
  display: flex;
  width: 100%;
}
.image {
  width: 50%;
  padding: 15px 15px;
}
.image img {
  width: 100%;
}
@media(max-width: 767px) {
  .image-container {
    flex-direction: column;
    align-items: center;
  }
  .image {
    width: 100%;
  }
}
</style>
<div class="image-container">
  <div class="image image1">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VZ6psJbTBJA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
  </div>
  <div class="image image2">
  <iframe width="560" height="315" src="https://www.youtube.com/watch?v=HfaBStJWK0s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
  </div>
</div>

Thank you very much!

2

Which theme are you using also can you share the store URL?

3

Yes, meant to add those. Theme is qrack-v2-0-4 and site is:

https://bigfoot-4x4.myshopify.com/pages/bigfoot-4x4-inc-home

4

Hi @bigfoot4x4

Thank you for the code snippet! I noticed the second video is using a “watch” url and not an “embed” url like the first video, have you tried replacing the second one with it’s embed url instead? That might fix the error message you are seeing.

1 Like
5

You are 100% correct. I looked over that code 10 times and did not notice that. Thank you so much Shay!

1 Like
6

Sometimes all you need is a fresh pair of eyes! Glad to hear it was an easy solution :grin:

1 Like