-
AuthorPosts
-
March 22, 2017 at 11:55 pm #765107
I need to create a website, where user is redirected to a new page when Youtube video is finished. However, it seems that the Youtube event listeners are not working with Enfold theme.
For example, I have tried to import the example code from Youtube iFrame Player API (https://developers.google.com/youtube/iframe_api_reference#Examples > Example #1) to a Enfold page and it doesn’t work. I have tried code block and text block and not using advanced layout editor at all. If I change theme to some WP default theme (Twenty Sixteen etc), the code and event listeners work just fine. The only modification I’ve done to those themes is these to the functions.php:
remove_filter( ‘the_content’, ‘wpautop’ );
remove_filter( ‘the_excerpt’, ‘wpautop’ );… I have tried to do the same for Enfold, but it hasn’t been working. I send you a link to a demo page, where the that example code is used.
March 23, 2017 at 8:42 am #765235Hey teme!
The player that is been used is not the iframe, but replaced, so that is why the video is not been targeted properly on the example.
Best regards,
BasilisMarch 23, 2017 at 9:05 am #765251Sorry, but I don’t quite understand your reply. If the code is wrong, why the exactly same code works when I’m using a basic WP theme? If there is a way to do this, could you please explain how I can get those Youtube event listeners to work in a page which is using Enfold theme?
I now changed the demo theme to Twenty Fourteen and the video & event listeners began to work correctly (same url as before).
- This reply was modified 7 years, 8 months ago by teme.
March 23, 2017 at 12:44 pm #765378I tried another example, which works fine with Twenty Fourteen theme, but when I put the code to Enfold Code Block, it displays nothing:
<!– 1. The <iframe> (and video player) will replace this <div> tag. –>
<div id=”player”></div><script>
// 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.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
window.location.href = ‘http://www.google.com’;
}
}
function stopVideo() {
player.stopVideo();
}
</script>- This reply was modified 7 years, 8 months ago by teme.
March 25, 2017 at 6:05 pm #766681Hi teme,
I watched the demo, the border color is changing, which means video events are registered and are handled.
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?Best regards,
VictoriaMarch 27, 2017 at 1:54 pm #767416Yes, as I said before: I now changed the demo theme to Twenty Fourteen and the video & event listeners began to work correctly (same url as before). So currently Enfold theme isn’t in use, but when I activate it, the code doesn’t work anymore. The admin access is in the private content box.
March 27, 2017 at 6:44 pm #767619March 27, 2017 at 6:44 pm #767620 -
AuthorPosts
- You must be logged in to reply to this topic.