Cfrgtkky

A pleasant good day to you all :)

I'm trying to remove the youtube branding from an iframe after it goes into fullscreen mode. You can see a sample of what I am attempting here: https://codepen.io/emjaisthebest/pen/ZmaKGv

HTML

<p><img data-video="XqC05_Oommw" alt="Play this video" src="http://img.youtube.com/vi/Y7d42LJfkqQ/0.jpg"></p>

CSS
div:fullscreen .ytp-title-text .ytp-title-link .yt-uix-sessionlink .ytp-title .ytp-title-channel-logo .ytp-title-text .ytp-watch-later-icon .ytp-button .ytp-settings-button .ytp-hd-quality-badge .ytp-title-expanded-title .ytp-youtube-button .ytp-button .yt-uix-sessionlink .ytp-menuitem-label .ytp-menuitem-content .ytp-play-button .ytp-progress-list .ytp-scrubber-button .ytp-swatch-background-color .ytp-time-duration .ytp-time-separator .ytp-time-current /Not sure if you want to hide the current time, babe/ .ytp-share-icon .ytp-pause-overlay .ytp-related-title .ytp-pause-overlay .ytp-suggestions .ytp-expand-pause-overlay .ytp-fullscreen-button .ytp-progress-bar-padding .ytp-progress-bar .admin-bar .ytp-title-channel .ytp-title-beacon .ytp-chrome-top .ytp-show-watch-later-title .ytp-share-button-visible .ytp-show-share-title {
display: none !important;
}

Javascript
if (!Element.prototype.requestFullscreen) {
Element.prototype.requestFullscreen = Element.prototype.mozRequestFullscreen || Element.prototype.webkitRequestFullscreen || Element.prototype.msRequestFullscreen;
}

// Listen for clicks
document.addEventListener('click', function (event) {

// Check if clicked element is a video thumbnail

var videoId = event.target.getAttribute('data-video');

if (!videoId) return;



// Create iframe

var iframe = document.createElement('div');

iframe.innerHTML = '<p>x</p><iframe width="560" height="315" src="https://www.youtube.com/embed/' + videoId + '?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';

var video = iframe.childNodes[1];



// Replace the image with the video

event.target.parentNode.replaceChild(video, event.target);



// Enter fullscreen mode

video.requestFullscreen();

}, false);

I know the css classes for all the elements I want to hide, but every time I try, it just does NOT work.

Is there anyone out there who can help me remove the ugly youtube branding? If yes, please help me as this is my first website and I would really love to make it aesthetically pleasing.

Edit #1: Someone was suggesting that my question was a possible duplicate of another question found here on stackoverflow, but that has nothing to do with removing the youtube branding from an iframe itself or modifying the iframe while it is in fullscreen mode. I, myself was trying to change it using the :fullscreen pseudo-class with no success. Could someone please tell me what I am doing wrong?

What might work for you is the modestbranding=1 parameter. For example:

src="https://www.youtube.com/embed/' + videoId + '?rel=0&autoplay=1&modestbranding=1"

You can read more about it here: https://developers.google.com/youtube/player_parameters#modestbranding