Black frame around embedded "responsive-video" with autoplay

Highlighted
New Member
2 0 0

Hi there - First post and fairly new to this so bare with me!

 

I have embedded a youtube video to a page and have added a line to make it 'responsive' to page widths so it's a bit more mobile friendly, I have also added in a part to make the video autoplay. However, I now have a thick top and bottom boarder on the video which I cant get rid of. 

 

It appears that I can only either have the 'responsive' sizing OR autoplay without the black boarder showing. Does anyone know how to resolve this so I don't have the top and bottom black boarder/frame?

 

CODE USED:

<div class="responsive-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/uj-1dExPUCc?rel=0;autoplay=1;modestbranding=1;autohide=1;showinfo=0;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>

 

VISUAL OF ISSUE:

Screen Shot 2019-07-10 at 17.00.32.png

Thanks in advance for any help!!

0 Likes
Shopify Partner
239 59 70

Hi @hannasmith91,

 

I understand that you're having trouble getting a YouTube embedded video to display properly.

 

Go ahead and remove all the code that you added for the embedded video.

 

Add this code, instead:

 

 

<style>
  .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }
  .embed-container iframe,
  .embed-container object,
  .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
<div class="embed-container">
  <iframe
    src="https://www.youtube.com/embed/uj-1dExPUCc?autoplay=1&controls=0&disablekb=1&fs=0&iv_load_policy=3&modestbranding=1&showinfo=0&rel=0&cc_load_policy=0&start=0&end=0"
    frameborder="0"
    allowfullscreen=""
  ></iframe>
</div>

 

 

Let me know how it goes or if you need further help!

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

0 Likes