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
Highlighted
Shopify Partner
242 59 103

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
Highlighted
Tourist
16 0 2

Hi @BrianAtWork ,

 

Thanks for helping out, I have the same issue and also youtube displays third-party irrelevant recommended videos at the end (I wouldn't mind to display videos from my channel). I read that Rel=0 used to do the trick but has been abandoned by youtube.

 

I tried your code and @hannasmith91's code but I get "www.youtube.com refused to connect" on my Shopify unchanged changes page (of-course I changed the url up to question mark). Do you have any idea why I'm getting this?

 

If both pieces of code work for you then it should be something on my end, I am new to this but I learn fast. Any help would be much appreciated.

 

Thanks again.

 

- that was my first post :)

0 Likes