Or, embed this snippet using GenerateWP WordPress Plugin.

Download

Clone

kerleny

kreleny

// Add Shortcode
function circulo() {

	<!DOCTYPE html>
	<html lang="es">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Video con Inscripción</title>
	    <style>
	        body {
	            display: flex;
	            justify-content: center;
	            align-items: center;
	            height: 100vh;
	            margin: 0;
	            background-color: #000;
	            overflow: hidden;
	        }
	        #videoContainer {
	            position: relative;
	            width: 768px;
	            height: 562px;
	            overflow: hidden;
	            border: 5px solid #333;
	            border-radius: 10px;
	        }
	        #videoElement {
	            position: absolute;
	            top: 0;
	            left: 0;
	            width: 100%;
	            height: 100%;
	        }
	        #inscriptionOverlay {
	            display: block; /* Asegura que se muestre al inicio */
	            position: absolute;
	            top: 0;
	            left: 0;
	            width: 100%;
	            height: 100%;
	            background-color: rgba(0, 0, 0, 0.6); /* Fondo negro 60% opaco */
	            z-index: 10;
	            color: white;
	            font-size: 24px;
	            text-align: center;
	            padding: 20px;
	            border-radius: 10px;
	            border: 1mm solid white; /* Marco de 1mm de grosor */
	        }
	        #inscriptionButton {
	            background-color: #007f00;
	            color: white;
	            font-size: 18px;
	            border: none;
	            border-radius: 5px;
	            padding: 10px 20px;
	            cursor: pointer;
	            transition: background-color 0.3s;
	            text-decoration: none;
	        }
	        #inscriptionButton:hover {
	            background-color: #00a000;
	        }
	    </style>
	</head>
	<body>
	    <div id="videoContainer">
	        <iframe id="videoElement" src="https://www.youtube.com/embed/i1z-_bu_IEU?autoplay=1&controls=0&showinfo=0&rel=0&mute=1" 
	                frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
	        <div id="inscriptionOverlay">
	            <p>Para ver el video completo y seguir viendo el <strong>Taller del Círculo de Prosperidad</strong>, debes inscribirte.</p>
	            <a id="inscriptionButton" href="https://wa.me/+573195339244">Inscríbete aquí</a>
	        </div>
	    </div>
	    <script>
	        // Puedes añadir una función para ocultar el mensaje después de cierto tiempo si es necesario
	        // setTimeout(function() {
	        //     document.getElementById('inscriptionOverlay').style.display = 'none';
	        // }, 5000); // 5000 milisegundos = 5 segundos
	    </script>
	</body>
	</html>
	

}
add_shortcode( 'Video', 'circulo' );