0

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?

Emjai Sparks
  • 11
  • 1
  • 3
  • 1
    Possible duplicate of [Override body style for content in an iframe](https://stackoverflow.com/questions/6494721/override-body-style-for-content-in-an-iframe) – Michael Jasper Nov 19 '18 at 23:13

1 Answers1

1

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

Matt Way
  • 32,319
  • 10
  • 79
  • 85
  • Thank you, sir, for taking time out of your day to answer my question. Sadly, I tried this and it didn't help me. But thanks once again for attempting to help me – Emjai Sparks Nov 19 '18 at 23:29
  • I have updated your codepen, and it works for me (does not show the youtube logo). You can see it here: https://codepen.io/anon/pen/gQXoXE – Matt Way Nov 20 '18 at 04:29
  • Hey Matt; thank you for your help :) But I am also interested in removing the ugly title, share button etc. from the video. All of the elements that I would like to hide are in the css section. Do you have any idea how I can remove those too? Any help you offer would be greatly appreciated – Emjai Sparks Nov 20 '18 at 16:17
  • Can I suggest that you edit your question to reflect *exactly* what it is you are trying to achieve (maybe use pictures). Also, what makes the title/share button etc ugly? It feels like your time might be better spent focusing on your actual application ux, rather than the subtleties of youtube. – Matt Way Nov 20 '18 at 23:06