YouTube video in iFrame on click

Hello, all,

I’m trying to set up a page with an iframe that, when the parent page first loads, the src is ‘about:blank’, but the src will change when a link is clicked. But when I click the link, the familiar youtube.com page loads without anything. Total time shows as 0:00, the screen is blank except for the ‘play’ arrow, and when you click play, it displays an error message with a link to ‘learn more’.

Here is what I have, so far:

<iframe id='ytVids' name='ytVids' src='about:blank' allowfullscreen>Your browser doesn't support iframe.</iframe>
<a href="https://www.youtube.com/embed/QzBGTblahblahblah" class="ytLink">PLAY</a>

… and within my $(document).ready():

$('.ytLink').on('click',function(e){
    $('#ytVids')[0].src = $(this).attr('href') + '&autoplay=1';
    e.preventDefault();
});

How do I get the video to load upon click?

V/r,

:slight_smile:

Is that a correct link to the video?

This seems to work with a different link.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<iframe id='ytVids' name='ytVids' src='about:blank' allowfullscreen>Your browser doesn't support iframe.</iframe>
<a href="http://www.youtube.com/embed/XGSy3_Czz8k" class="ytLink">PLAY</a> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>

$('.ytLink').on('click',function(e){
    $('#ytVids')[0].src = $(this).attr('href') + '?autoplay=1';
    e.preventDefault();
});
</script>
</body>
</html>

I think you need ‘?’ not ‘&’ before the autoplay.

Bear in mind I know nothing about video :smile:

:slight_smile: No… I just got lazy and didn’t want to keep looking at the screen to copy the whole thing.

!!! That might be my problem. I kept thinking the link was “/watch?v=” instead of “/embed/”. {facepalm} I’ll give that a shot as soon as I get home from work.

Thanks!

:slight_smile:

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