While I was testing on Wix with the free plan (free domain), everything worked, but once I upgraded my plan and purchased the domain, my Twitch embed stopped working as well as before even when using the same code. I clarify that I changed what I had to change, which was the parent, but I can’t get the allowfullscreen to work again. If someone could help me pls, here´s the code:-
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Transmisión de Twitch con Chat</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
background: #0e0e10; /* Fondo oscuro típico de Twitch */
}
#container {
flex-grow: 1;
display: flex;
flex-direction: row;
height: calc(100% - 40px); /* Ajustando la altura para dejar espacio al botón */
}
#miPlayerTwitch {
flex-grow: 1;
overflow: hidden;
}
#chatFrame {
width: 300px;
display: none; /* El chat está oculto por defecto */
height: 100%;
}
#chatButton {
background: #6441a5; /* Color de Twitch */
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
width: 100%;
text-align: center;
transition: background 0.3s ease; /* Transición suave del fondo */
}
#chatButton:hover {
background: #5431a4; /* Oscurecimiento del botón al pasar el cursor */
}
#chatButton:active {
background: #4421a3; /* Cambio de color al hacer clic */
}
@media (max-width: 800px) {
#container {
flex-direction: column;
}
#chatFrame {
width: 100%;
height: 300px; /* Muestra el tamaño del chat en móviles cuando está visible */
}
#miPlayerTwitch {
height: calc(100% - 50px); /* Espacio para el botón */
}
}
</style>
</head>
<body>
<div id="container">
<div id="miPlayerTwitch"></div>
<iframe
id="chatFrame"
src="https://www.twitch.tv/embed/elitearena/chat?parent=www.elitearenaesports.com&parent=www-elitearenaesports-com.filesusr.com"
frameborder="0"
scrolling="no"
allowfullscreen="true">
</iframe>
</div>
<button id="chatButton" onclick="toggleChat()">Mostrar Chat</button>
<script src="https://player.twitch.tv/js/embed/v1.js"></script>
<script type="text/javascript">
var options = {
width: "100%",
height: "100%",
channel: "elitearena",
parent: ["www.elitearenaesports.com", "www-elitearenaesports-com.filesusr.com"],
layout: "video",
allowfullscreen: true
};
var player = new Twitch.Player("miPlayerTwitch", options);
player.setVolume(0.5);
function toggleChat() {
var chat = document.getElementById('chatFrame');
var button = document.getElementById('chatButton');
if (chat.style.display === 'none' || chat.style.display === '') {
chat.style.display = 'block';
button.innerHTML = 'Ocultar Chat';
} else {
chat.style.display = 'none';
button.innerHTML = 'Mostrar Chat';
}
}
</script>
</body>
</html>
note: im not good enough at dev, I made this with help of chatgpt