Remove Youtube embed video on a blog page

Hi @demirstringart

Unfortunately, you cannot style the content inside an iframe, such as a video embedded from youtube.com. It works in your browser page inspector, but this cannot work from the website where the iframe is.

If YouTube doesn’t offer a dedicated option to hide the title, you won’t have any other choice than displaying the video by using a different method. Have a look at VideoJS for example. You can use the library directly or look for a WordPress plugin based on it.

What you could do is create a separate static thumbnail image with a fake YT play button. The image can link to a separate dedicated page with a larger video embed. Or you could have script insert the video iframe in situ when the static image is clicked.

You shouldn’t initially want YT embeds on your pages anyway. They noticeably impede page load speeds. By having them on a separate dedicated page or inserted dynamically, your main page will have better page load speeds.

Hi Luke and Bcworkz

Thank you very much for your two answers, which help me understand why this is not working, and how I can fix the problem.
The static thumbnail solution is a very good idea, which I can do without too much difficulty.
On the other hand, I don’t know how to make a script in order to insert the video iframe in situ when the static image is clicked. Can you help me ?

Thanks again !

You need to add a click event listener to the div container which has the static thumbnail. One way to do this is to add an onclick attribute to the div element, but WP editors can be fussy about what attributes are allowed. If jQuery is already loaded onto the page, then adding one that way is fairly simple. Or you could always use .addEventListener().

The listener callback would mainly set the innerHTML prop of the div element to the appropriate embed iframe, replacing the existing img tag. For example:
document.getElementByID('yt-container-1').innerHTML ='<iframe src="https://youtube.com/embed/etc...."></iframe>';

Adding JS code to any WP page is kind of odd because we cannot simply add inline script through the page editor because the editor will corrupt the script’s code. The classic way to add scripts to a WP page is to contain them in an external file. Then enqueue the file with wp_enqueue_script().

If you think having another external file for relatively simple JS code is excessive, you would not be alone. It is feasible to output brief inline script from the “wp_print_scripts” action hook. You avoid the need for an external file, but script added this way should avoid requiring dependencies because you don’t have a lot of control over in what order your script appears in relation to other scripts.