<% content_for :video_css, flush: false do %> .<%= section_id %>__video__youtube-player-container--aspect-ratio { width: 100%; padding-bottom: <%= (100.to_f / s["width"].to_f * s["height"].to_f) %>%; } <% end %>

<%= s["text"] %>

<% content_for :youtube_ready_js, flush: false do %> (function() { var mask = document.getElementById("<%= section_id%>"); var overlay = document.getElementById("<%= section_id%>__video__youtube-overlay"); var controls = document.getElementById("<%= section_id %>__video__youtube-controls"); var player = new YT.Player('<%= section_id %>__video__youtube-player', { videoId: '<%= s["youtube_video_id"] %>', playerVars: { controls: 0, modestbranding: 1, rel: 0, showinfo: 0, autoplay: 1, loop: 1, playlist: '<%= s["youtube_video_id"] %>' }, events: { onReady: onReady, onStateChange: onStateChange } }); // Event listeners function onReady() { // By default, assume that autoplay is available and mute. If not, unmute it after feature detection is ready player.mute(); Modernizr.on('videoautoplay', function(result) { if(!result) { player.unmute(); } }); } function onStateChange(e) { var ended = 0; if (e.data == ended) { inactivate(); } } // UI function hideOverlay() { mask.style.maxHeight = "none"; overlay.classList.remove("video__youtube-overlay--inactive"); overlay.classList.add("video__youtube-overlay--active"); controls.style.opacity = 0; } function showOverlay() { mask.style.maxHeight = "75vh"; overlay.classList.remove("video__youtube-overlay--active"); overlay.classList.add("video__youtube-overlay--inactive"); controls.style.opacity = 1; } // Player controls var inactive = true; function activate() { player.seekTo(0, true); player.unMute(); hideOverlay(); inactive = false; } function inactivate() { player.mute(); showOverlay(); inactive = true; } var playing = true; function togglePlayback() { if(playing) { player.pauseVideo(); showOverlay(); } else { player.playVideo(); hideOverlay(); } playing = !playing; } overlay.addEventListener("click", function() { if(inactive) { activate(); } else { togglePlayback(); } }); })(); <% end %>