I have a CPT in wordpress that shows a iframe of vimeo inside a fancybox, until there all ok. I have integrated the API player Vimeo, to trigger functions in the events, at the end of the video I show another layer different from the initial one in which there is a "see again" button.
From the second time I call the function that generates the player object, it gives me the error
"Failed to execute 'postMessage' on 'DOMWindow': The target origin provided (' link ') does not match the recipient's window origin (' link ') "
This is the view
<div class="container-fluid videobg">
<div class="destacado-container video-plus-container" style="background-image: url( '<?php bloginfo('template_url') ?>/img/destacados-bg.png' );">
<!-- imagen video -->
<div class="container" style="margin-top: 83px;">
<div class="videobox" style="position: relative;">
<a data-fancybox class="playVideo playContent playButton" href="#myvideo"><img src="<?php bloginfo('template_url') ?>/img/play-off.png" alt=""></a><img src="<?php echo $img['url'] ?>" alt="" class="img-responsive">
</div>
</div>
<!-- fin imagen video -->
<!-- imagen final video -->
<div class="container container-final" style="margin-top: 83px; display: none; ">
<div class="videobox-final col-xs-12" style="background-image: url('<?php bloginfo('template_url') ?>/img/final.png'); background-size: 100% auto; padding: 0em 0em 1.5em 0em">
<div class="col-xs-6">
<h2 class="text-center title-left">Descubra un horizonte de oportunidades</h2>
<div class="col-xs-12 text-center"><img class="logo_cyc img-responsive" src="<?php bloginfo('template_url') ?>/img/logo_cyc.png" alt=""></div>
<div class="col-xs-12 text-center masinfo-box" style="">
<a href="" class="masinfo">Más Información</a>
</div>
<div class="col-xs-12 volver_a_ver">
<a data-fancybox href="#myvideo" class="playVideo playAgain">
<span class="fa fa-undo"></span>
<span>Volver a ver</span>
</a>
</div>
</div>
<div class="col-xs-6">
<div class="col-xs-12 title-right">
<h3 style="">Te recomendamos: </h3>
</div>
<div class="col-xs-12 text-center sugest">
<a href="#"><img src="<?php bloginfo('template_url') ?>/img/sugerencia_1.png" alt="" class="img-responsive"></a>
</div>
<div class="col-xs-12 text-center sugest">
<a href="#"><img src="<?php bloginfo('template_url') ?>/img/sugerencia_2.png" alt="" class="img-responsive"></a>
</div>
</div>
</div>
</div>
<!-- fin imagen final video -->
</div>
<!-- etiqueta info -->
<div class="label-container" style="position: absolute; top: 12px; right: 20px;border-radius: 5px;background-color: rgba(0,0,0,.5); padding: .4em;display: none; z-index: 9999999999;">
<a href="<?php the_field('url_destino_etiqueta') ?>" class="label_enlace col-xs-12" style="">
<div style="" class="label">
<span class="label-arrow" style="display:none;"><img src="http://laneurona.com/wp-content/themes/la_neurona/img/red-arrow.png" alt="" style="height: 30px;padding-bottom: .5em"></span>
<span class="label-text" style="display:none;font-weight:100;font-size: 2em; margin-top: -.5em; cursor:pointer; padding: 10px"><?php the_field('texto_etiqueta') ?></span>
<span class="fa fa-info-circle fa-3x info-icon" style=""></span>
</div>
</a>
</div>
<!-- fin etiqueta info -->
<iframe id="vimeo_player" src="<?php the_field('video_plus') ?>" width="100%" height="100%" frameborder="0"></iframe>
</div>
<!-- fin contenido fancybox -->
This is the js
(function($) {
$(".playContent").click(function(){
//VIMEO API PLAYER
console.log('api loading');
var iframe_options = {
color: '#ffffff',
origin: '*',
};
//vimeo api segun su doc
var url_frame = $('iframe').attr('src');
$('iframe').attr('src',url_frame +'?player_id=vimeo_player&loop=0&autopause=0');
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe , iframe_options);
//console.log(player);
console.log('playing video');
//forzamos play
player.play().catch(function(error) {
console.error('error playing the video:', error.name);
});
player.on('play',onPlay);
player.on('pause',onPause);
player.on('ended', onFinish);
player.on('progress',onPlayProgress);
player.on('seeked',isSeeked);
player.getVideoTitle().then(function(title) {
console.log('title:', title);
});
player.getVideoId().then(function(id) {
// id = the video id
console.log('id');
console.log(id);
}).catch(function(error) {
// an error occurred
console.log(error);
});
function onPlay(data) {
console.log('play!!');
console.log(data);
//eliminamos el boton de cierre del iframe
$('button.fancybox-close-small').attr('style','display : none');
/* - Aparece el icono de info 15s despues cargar el video - */
setTimeout(function(){
jQuery('.label-container').fadeIn();
}, 10000);
/* - Fin Aparece el icono de info 15s despues cargar el video - */
console.log('go to ajax');
//ejemplo ajax wp
$.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
data: {'action':'test_ajax','idevento':'321'},
success: function(dataResponse){
console.log(dataResponse);
},
error: function(dataResponse){
console.log('error!!');
console.log(msg.statusText);
}
});
}//fin onPlay
function onPause(data) {
console.log('paused');
console.log(data);
}
function onFinish(data) {
$.fancybox.close();
$('.video-plus-container .container').fadeOut();
$('.video-plus-container .container-final').fadeIn();
}
function onPlayProgress(data) {
console.log(data.seconds + '\'s played');
}
function isSeeked(data){
console.log('seeked');
console.log(data);
}
});//fin onclick
//altura
var height = screen.height/1.5;
//70% del ancho de pantalla
//var width = screen.width*.7;
/*fancy box*/
$(".playVideo").fancybox({
beforeShow : function(){
//asignamos tamaño
this.width = 16/9 * height;
this.height = height;
},
afterClose : function(){
//acciones al cierre
}
});
/*fancy box*/
}) (jQuery);
I know that the problem is that the origin does not match the destination and more since there is no SSL certificate in my domain. What I do not understand is because the first time does not give me any problem.
Thanks in advance