¿Cómo escondo el primer y último medio segundo de un video incrustado de YouTube configurando el reproductor div para mostrar: ninguno o margen: 100%, no importa? Mi objetivo es ocultar el botón de YouTube al principio del video y ocultar los videos relacionados al final, para que los visitantes no puedan hacer clic en ellos y salir de mi sitio.
¡¡¡Mis cumplidos!!!
var tag = document.createElement('script'); tag.src = 'https://www.youtube.com/iframe_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { videoId: 'VIDEOID', playerVars: { 'version': 3, 'vq': 1080, 'fs': 0, 'controls': 0, 'disablekb': 1, 'loop': 1, 'modestbranding': 1, 'iv_load_policy': 3, 'autohide': 1, 'showinfo': 0, 'rel': 0, 'playsinline': 1, 'autoplay': 1, 'start': 2, 'end': 186 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }) } function onPlayerReady(event) { event.target.playVideo() } function onPlayerStateChange(event) { if (event.data == YT.PlayerState.ENDED) { window.location.replace('mysite.com') } } html { background: black } #player { z-index: -1; height: 122.5%; top: 50%; left: 50%; transform: translateX(-50%)translateY(-50%); -ms-transform: translateX(-50%)translateY(-50%); -moz-transform: translateX(-50%)translateY(-50%); -webkit-transform: translateX(-50%)translateY(-50%); overflow: hidden } div, #player { margin: 0; border: 0; padding: 0; width: 100% } div, marquee, #player { position: fixed } div, marquee { left: 0 } div { top: 0; right: 0; bottom: 0; height: 100% } marquee { top: 96%; font-size: 100%; font-weight: 500; font-family: sans-serif; color: yellow } <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width' ,'height=device-height'> </head> <marquee> MY VIDEO </marquee> <div></div> <div id='player'></div> </html>