Menu
I'm using Youtube API, and have several Divs as thumbnails. When one thumbnail (div) is clicked, the corresponding Youtube video should play. I'm using an iframe element for the video, and the webpage is made up of only HTML, CSS and JavaScript. If I don't use a button (thumbnails/div with onclick) but rather have a blank page with the Youtube API JavaScript code, it'll work. However, when I try to wrap everything inside a function call (from the div's onclick) nothing happens, but I get this error.
"Refused to execute script from 'https://www.youtube.com/embed/HVldRjNb4BE' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled."
Here is my code:
<div id="player"></div>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
//setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
This code is just copied from https://developers.google.com/youtube/iframe_api_reference.
When this is all I have in the document, a player is there when the page loads, and the video is ready to play. So to clarify my question, how can I make it so that when a user clicks one of the buttons (div) the Youtube player displays and play the video?
918
Press the Share button that appears immediately below the YouTube video that you want to embed. Press the Embed icon in the popup that appears. You should now see a popup window titled Embed Video. The video appears on the left and the embed code on the right.
To make an embedded video autoplay, add "&autoplay=1" to the video's embed code right after the video ID (the series of letters that follows "embed/"). Embedded videos that are autoplayed don't increment video views.
Hello i think this will help you :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Play Youtube Video On Click</title>
</head>
<body>
<button onclick="myFunction();return false;">Click me</button>
<div id="video"></div>
<script>
function myFunction() {
document.getElementById("video").innerHTML = "<div id='player'></div>";
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
//setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
