Embed YouTube link only showing on Safari. Why not showing on Chrome?

Question

The embed YouTube link I have on my webpage is showing perfectly on Safari, but not on Chrome! I don't understand why.

Here is the code:

<iframe width="720" height="405" src="https://www.youtube.com/embed/lhYcUN60QjU?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

Please advise!

Does opening **[the direct link itself](https://www.youtube.com/embed/lhYcUN60QjU?rel=0&showinfo=0)** work okay? (worked for me in Chrome). If yes then something wrong with your HTML code. I can only spot `allowfullscreen` as a problem, shouldn't that be something like `allowfullscreen="true"`? maybe even without quote marks. — VC.One, Jul 20 '15 at 14:02

score 0 · Answer 1 · answered Jul 18 '15 at 17:13

Check installed extensions and version of Chrome. Do you have developer version of Chrome?

Try to clear cache from Chrome by clicking settingsbutton and choosing Settings > Show Advanced Settings > Delete browsing data.

Also, check Enable hardware acceleration when available.

score 0 · Answer 2 · edited May 23 '17 at 10:24

Switch from https:// to http://. I have it playing in Chrome (43.0.2357.134 (64-bit)) in this Pen.

(I've put the code here only because the Editor won't let me reference the Pen without the code. The code is for a responsive <iframe>. See generally How to make this youtube video responsive?.)

// CSS

.responsive-wrapper {
  position: relative;
  height: 0;    /* gets height from padding-bottom */
  /* put following styles (necessary for overflow and scrolling handling  
     on mobile devices) inline in .responsive-wrapper around iframe because not  
     stable in CSS:
     -webkit-overflow-scrolling: touch; overflow: auto; */
}

.responsive-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#Iframe-YouTube-Life-Coach {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

/* padding-bottom = h/w as % -- set aspect ratio */
.responsive-wrapper-wxh-560x315  {
  padding-bottom: 56.25%;
}  

.center-block-horiz {
  margin-left: auto;
  margin-right: auto;
}
.border-5px-inset-4f4f4f {
  border: 5px inset #4f4f4f;
}
.set-padding {
  padding: 30px;
}

// HTML

<!-- embed responsive iframe --> 
<div class="set-padding border-5px-inset-4f4f4f">
<div id="Iframe-YouTube-Life-Coach" 
class="border-5px-inset-4f4f4f center-block-horiz">
  <div class="responsive-wrapper 
              responsive-wrapper-wxh-560x315"
       style="-webkit-overflow-scrolling: touch; overflow: auto;">

    <iframe src="http://www.youtube.com/embed/lhYcUN60QjU?rel=0&amp;showinfo=0">  
      <p style="font-size: 110%;"><em><strong>IFRAME: </strong>  
There is iframe content being displayed  
here but your browser version does not support iframes. </em>  
Please update your browser to its most recent version  
and try again.</p>  
    </iframe>
  </div>
</div>
</div>

Embed YouTube link only showing on Safari. Why not showing on Chrome?

2 Answers2