CODEWITHSUNDEEP
jquerywordpressiframe
Dirty Bird Design
Dirty Bird Design

Reputation: 5543

Change YouTube iFrame source on select change in WP

Inside a WP template I am loading a YouTube play list via iFrame. I have a select box above it that allows users to select another playlist. It seems simple, but I keep running into browser security issues. 

jQuery(document).ready(function() {
  $('#channelChooser').change(function() {
    $(this).next('iframe').attr('src', this.value);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="channelChooser" id="channelChooser">
  <option value="https://www.youtube.com/playlistlist=one">One</option>
  <option value="https://www.youtube.com/playlist?list=Two">Two</option>
  <option value="https://www.youtube.com/playlist?list=Three">Three</option>
</select>
<iframe id="ytplayer" type="text/html" width="720" height="405" src="https://www.youtube.com/embed/?enablejsapi=One&listType=playlist" frameborder="0" allowfullscreen></iframe>

I get this error:

Refused to display 'https://www.youtube.com/playlist?list=Two' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

I just want to be able to change the youtube play list on select, preferably without a plug in because this should be simple. Thanks!

Upvotes: 0

Views: 47

Answers (1)

Whamo12
Whamo12

Reputation: 76

X-Frame-Options: Sameorigin is used by YouTube to prevent clickjacking. You will need to embed the actual playlist.

Embed videos & playlists

Upvotes: 1

Related Questions