We Keep Coding

How to disable click event on video element in youtube

I am currently working on a chrome extention for youtube and I want to disable the option for the user to pause/play the video by clicking on it.
I saw some posts that say "video.off('click');" but it dosent work.
I tried this one also :
video.addEventListener('click', function(event){
console.log("preventing?")
event.preventDefault();
});
but still it doesn't do nothing.
I would love some help if possible - Thank you all in advance!
Edit:
I saw the comments and I want to sharpen my question. I need a solution to disabling just the click event to stop the play/pause from there.
I also need the answer to be written in a javascript file because I want to control whether or not the user can click on the video.
I've also looked in: Javascript code for disabling mouse click for youtube videos but I haven't managed to find a corrent solution to my spesific question. I saw one solution that recommend to add a transparent overlay on top of the video element but I have no idea how to do so and how to make it resize as the video player itself resizes

Attach a click listener on window + use the capture phase by specifying true for the third parameter of addEventListener + use stopPropagation, so that your listener will be the first target in the event propagation chain i.e. it'll run before the site's handlers because sites usually don't use the capture phase.
window.addEventListener('click', event => {
if (event.target.matches('video')) {
event.stopPropagation();
}
}, true);
Note that if some rare site uses the exact same trick, you can still override it by declaring your content script with "run_at": "document_start".

I noticed that some websites showing youtube videos put a transparent overlay on top of the player so that the users cannot click on the "Open in YouTube" icon. This might help you too, even if it might still be able to give focus to the controls using the keyboard.

You can check both the implementations here: https://stackblitz.com/edit/web-platform-4oehg4?file=index.html ( SO snippet can't embed yt iframe videos )
// HTML
<div class="container">
<iframe
id="video2"
width="100%"
height="100%"
src="https://www.youtube.com/embed/LcGRpsD6yuk?controls=0?mute=1&autoplay=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; mute; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
></iframe>
<div class="overlay"></div>
</div>
// CSS
.container {
position: relative;
width: 100%;
height: 50%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Using CSS Only:
// HTML
<iframe
width="100%"
height="50%"
id="video"
src="https://www.youtube.com/embed/LcGRpsD6yuk?controls=0?mute=1&autoplay=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; mute; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
></iframe>
// CSS
#video {
pointer-events: none;
}

positioning pop-up iframe according scrollTop of top window

I'm developing plugin which has some pop-up. Plugin is included on some page like iframe but with different domain. There is not allowed to do any other changes on that page except to add this iframe.
<iframe class="frame" style="width:100%" src="another-domain.com" frameborder="0" scrolling="no" height="4500px"></iframe>
Pay attention that scrolling="no" and height is much bigger then heigh of page.
Pop-up should be vertically centered on the page when it appears, doesn't matter how much user scrolled down the page. See the pic
I tried $(top.window).scrollTop() but there is Cross-domain problem.
Is there any css trick to do this?
Thank you in advance.

You can try with transform: translate() function CSS
iframe {
top: 50%;
position: absolute;
transform: translateY(-50%);
}
<iframe class="frame" style="width:100%" src="another-domain.com" frameborder="0" scrolling="no" height="4500px"></iframe>

How Can I Position a Clickable Image to Top of Browser in jQuery

Obviously I am a novice coder :( This seems like it should be easy, but I can't figure it out.
CSS
div {
display: none;
}
BODY
<div id="div" style="width:100%;height:1750px;z-index:1;">
<iframe src="mypage.html" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="1750px" ALIGN="left">
</iframe>
</div>
<iframe src="http://www.website.com" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="1750px" ALIGN="left">
</iframe>
jQuery
$('#hover').mouseenter(function() {
$('#div').show();
}).click(function(e) {
e.preventDefault();
$('#div').hide();
});
This webpage code displays the clickable image "30x1800clear.gif" at the top of the page that opens the "mypage.html" iframe content on hover and closes the ifame content on clicking the image. Which is exactly what I want it to do.
I want the image to stay fixed at the top of the page on scroll. If I try to use ANY styling at all, or surround the code in a DIV with any position styling the image disappears completely.
Can someone show me how to make the image stay fixed at the top of the browser window on scrolling the page?

add position is fixed to image tag. like this
<img src="30x1800clear.gif" width="100%" height="20px" border="0" alt="" style="position: fixed;">

There are several issues here:
You have a div with id div. This is very confusing, so lets change the id to mydiv. In your css, you apply your display:none to div, so to all divs. I guess you want to apply it only to the div in question, so yo should change it to:
#mydiv {
display: none;
}
You're mixing inline style and separate file for the same element, so let's combine everything into the css file:
#mydiv {
width:100%;
height:1750px;
z-index:1;
}
And the first line of your html becomes:
<div id="mydiv">
Now, for the real question: You want to fix the position of the image to the top. Let's add this lines to the #mydiv css block:
position: fixed;
top: 4px; /* You can change this to any number of pixels you want, including 0 */
left: 4px; /* Same thing */

Drag parent starting from its iframe child

I've something like this
<div draggable="true">
<iframe width="640" height="360" src="http://www.youtube.com/watch?v=dQw4w9WgXcQ?fs=1&feature=oembed" frameborder="0" allowfullscreen="">
</iframe>
</div>
and I want to be able to drag the entire div when I start the drag by clicking anywhere on the div including the iframe. However the iframe doesn't cascade the event. I also want to keep the interactions with the youtube video possible (play, fullscreen, etc).
Does anyone have any idea how to do this with html/css/js/jQuery?

here you have a near example you want....just fix it a little
#dra
{
width:560px;
height:315px;
border:1px solid green;
cursor:pointer;
}
#dra:hover iframe
{
z-index:-1;position:absolute;
}
<div id="dra"><iframe width="560" height="315" src="http://www.youtube.com/embed/T6s3d2wdXVg" frameborder="0" allowfullscreen></iframe></div>
<script>
$( "#dra" ).draggable({stop: function() {
$( "iframe" ).css('z-index','0');
}});
</script>

JQUERY gotcha, Why can't I change inside an iframe that is hosted locally?

Give the following on a page:
<iframe frameborder="0" allowtransparency="true" tabindex="0" src="" title="Rich text editor" style="width: 100%; height: 100%;" id="hi-world">
<p><span class="tipoff" title="System tooltip for search engines">Download now</span></p><p>adasdads</p><p>a</p><p><span class="tipoff" title="System tooltip for search engines">Download n1111ow</span></p>
</iframe>
The following works:
$('#hi-world').css("width","10px");
But what I want to do is change the paragraphs in the iFrame, and this does not work:
$('#hi-world').find('p').css("background","red");

ok just figured it out:
$('#hi-world').contents().find('p').css("background","red");

The first is changing the css of the iframe element. To do the second, you have to access the contentDocument. As noted, in jQuery you can use contents for this.