Why won't this YouTube video play?

HTML & CSS
,
1

I don’t understand why the following code doesn’t play the YouTube video in Chrome, Firefox, or IE:

<iframe width='560' height='315' src='https://www.youtube.com/watch?v=LdS97xPmziU' frameborder='0' allow fullscreen></iframe>

No errors in the console.

Is there an alternative to this code so it will work? Are we supposed to use HTML5 video for YT videos?

UPDATE: See post #4.
Is there a reason the YT video doesn’t play when pulled out of a JavaScript DB and put into a div via innerHTML?

2

You have to use a special URL. See this codepen - broken example in it, along with a fixed version.

If you looked in the console, you’d have seen errors in there.

3

Good examples! Thanks.

4

Is there a reason the YT video doesn’t play when pulled out of a JavaScript DB and put into a div via innerHTML?

5

We may need a link to your test site to troubleshoot this. Does the source code in the browser show that the video is being addressed when pulled out of a JavaScript DB and put into a div via innerHTML? If so, show us that code from the browser.

6

The page source for the browser merely repeats the code on the HTML page just as I wrote it.

On the other hand, Google’s Inspector shows this code when the Video button is clicked. Here’s the div extract from Inspector:

<p style="font-weight:bold">ItemB</p>
<p>Video should show below</p>
<div class="vidwrapper ratio"><iframe class="b-lazy" data-src="https://www.youtube.com/embed/LdS97xPmziU" allow="" fullscreen="" frameborder="0" width="560" height="315"></iframe></div>
<br><button id="close1" onclick="close1()" style="width:10em;">close</button>
7

It says “data-src” not “src” (on the iframe). You need to make that attribute change. Right now it’s linking to nothing.

8

Yeah that works. This helps me understand why it didn’t work: https://stackoverflow.com/questions/15320052/what-are-all-the-differences-between-src-and-data-src-attributes

9

I have it all working now. Video shows within the dropdown in all screen sizes. See updated codepen in #4.

10

Isn’t the addition of “data-” part of how the lazy-load script works so all the videos don’t load one after the other? Am I compromising the script the way I do it? Codepen updated in #4.

… Never mind. I seen in Networking web tools that each video only loads when its container is shown.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.