I am trying to remove the YouTube embed Title and Watch Later things, Basically the header element. After lots of research I did not find any solution to remove it. It's depreciated in 2018. Anyways I made some logic to remove it, But I did not know how can I do that, I've used so many methods but did not works so I decided to post here.
The logic is- iFrame has a class called .ytp-chrome-top If you right click on the title you will see something like shown in Image 1. After that if you have added jQuery in your page you can simply remove the div from the console with this code - $('.ytp-chrome-top').remove()
The another way to remove it with css, See the Image 2, I have added display: none to it and it's removed. But the main problem is, You can't define the code from your page, It'll not work. You have to run it after loading the page (Client Side). Is there any way to load a script in console after loading the page?? Or inject a CSS to the page after loading the page. I just wanted to put two lines of code, It'll solve the problem.
Note: Please don't suggest plyr.io or video.js They provide good players but the don't have the quality changing option.
Please help me out from this issue, It'll very helpful for me! Thank you in advance!
Current HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe width="100%" height="315" src="https://www.youtube.com/embed/M5QY2_8704o" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</body>
</html>
Maybe you can use
window.addEventListener('DOMContentLoaded', (event) => {
//your removal code here
document.querySelector(".ytp-chrome-top").display = "none"
});
or with jQuery
$(function(){
// do this after dom is ready
$('.ytp-chrome-top').remove()
});
Try this:
$(document).ready(function() {
$('.ytp-chrome-top').remove()
});
Related
I use Extjs and JS to build a dialog where can display my html data from DB, that data is wrapped with iframe like this:
<iframe name="ext-gen568" frameborder="0" src="javascript:;" style="width: 514px; height: 189px;">
<html>
<head> ... </head>
<body>
<br><br>
<blockquote type="cite">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<p>Hello</p>
<video><source src="x" onerror="alert('xss')"></video>
</blockquote>
</body>
</html>
</iframe>
I tried to add sandbox to iframe, but it doesn't work, the XSS alert still show.
Then I tried to change to <iframe src='#'... sandbox>, but XSS alert still show.
I removed src or just set it '' in <iframe src=''... sandbox>, it got this error: DOMException: Blocked a frame with origin "mytestdomain" from accessing a cross-origin frame.
What should I do to handle my issue?
Thanks a lot for any help.
The issue is fixed by set "allow-same-origin" for sandbox
<iframe sandbox="allow-same-origin" src="javascript:;"...></iframe>
Is there a way to determine from inside of a cross-domain iframe if the iframe is in view or not?
I was trying to achieve this using Intersection Observer API. But it seems to work only for same-domain iframe and not cross-domain. I checked the Intersection Observer API documentation(both on MDN and W3C), but couldn't find anything related to this. I hope I'm not missing anything here.
Here is the example code
Main Html Page
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
</head>
<body>
<div style="margin:700px auto;text-align:center;">
<iframe marginwidth="0" marginheight="0" frameborder="0" height="250px" width="300px"
id="aax_if_aax_sidebar-btf-1" allowtransparency="true" src="http://127.0.0.1:8080/iframe.html"></iframe>
</div>
</body>
</html>
Embedded Iframe Page
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframe</title>
</head>
<body>
<div id="abc" style="background-color: black;width:100%;height: 100%;"></div>
<script>
setupIntersectionObserver = function (adContainer) {
console.log('setting up observer', observer);
var observer = new IntersectionObserver(
function (entries) {
console.log('observer triggered', entries);
},
{
root: null,
rootMargin: '10px',
threshold: 0
}
);
observer.observe(adContainer);
};
setupIntersectionObserver(document.getElementById('abc'))
</script>
</body>
</html>
If I run the main page locally, then the intersection observer inside the iframe works only if the page is browsed using 127.0.0.1:8080, and not for localhost:8080 (cross-domain)
Does Intersection Observer works from inside of a cross-domain iframe, with respect to the viewport?
I do not believe that there are any restrictions on cross-origin IntersectionObservers, however in my understanding they should have no explicit root set. In your case that would mean removing root: null from IntersectionObserver's configuration in the sub-frame.
It is important to note however, that your specified rootMargin value will not take effect in the cross-origin case as per the W3C it is only applied "for targets which belong to the same unit of related similar-origin browsing contexts".
You might also need to explicitly switch your JavaScript context in dev tools to the sub-frame to see the log message. Example in Chrome Dev Tools.
This use case is supported by WebKit & Blink for sure, because they have automated testing specifically for cross-origin IntersectionObserver: main frame page, sub-frame page
I am making a simple website which changes the image displayed when a button is clicked. But my code doesn't seem to be working as when I click on the button 'Click!' the alt text gets displayed instead of the image changing.The source of the images is perfectly fine, as when I use the same source outside the script the images show up.
<head>
<title>Pic Change</title>
<meta charset="utf-8">
<meta name="Pic Change">
<meta name="keywords" content="face,PES">
<meta name="author" content="Thalle">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body class="body" style="background-color:#4682B4">
<script>
function display(whichimage){
if(whichimage == 0){
document.getElementById('Click').src="C:\.....\Memes\Animals\initial.jpeg"
}
else{
document.getElementById('Click').src="C:\.....\Memes\Animals\Whenlife.jpeg"
}
}
</script>
<image id="Click" src="C:\......\Memes\Animals\initial.jpg" alt="Click Button to click picture" style="width:300px;height:300px" >
<p>
<button type="button" onclick="display(1)">Click!</button>
<button type="button" onclick="display(0)">Reset</button>
</p>
</body>
</html>
The code is fine, you just forgot the file:// before the start. This code shows that when you give a working image src in your code, it will work just fine. Also, don't use files from your disk on Stack Overflow, it gives out private information that you probably don't want on the web.
<head>
<title>Pic Change</title>
<meta charset="utf-8">
<meta name="Pic Change">
<meta name="keywords" content="face,PES">
<meta name="author" content="Thalle">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body class="body" style="background-color:#4682B4">
<script>
function display(whichimage){
if(whichimage == 0){
document.getElementById('Click').src="http://www.iconarchive.com/download/i86425/martin-berube/flat-animal/duck.ico"
}
else{
document.getElementById('Click').src="https://maxcdn.icons8.com/Share/icon/Animals//duck1600.png"
}
}
</script>
<image id="Click" src="http://www.iconarchive.com/download/i86425/martin-berube/flat-animal/duck.ico" alt="Click Button to click picture" style="width:300px;height:300px" >
<p>
<button type="button" onclick="display(1)">Click!</button>
<button type="button" onclick="display(0)">Reset</button>
</p>
</body>
</html>
You forgot the protocol (file://). It should be like
document.getElementById('Click').src="file://C:\Users...";
otherwise it will be just appended to the src everytime you click a button.
Try to put your JavaScript in the <head> section. Then it might work.
Also. There is no such thing as image in HTML. It's img.
In javascript, you need to escape backslashes in strings, so in adresses in particular. Replace all "\" by "\\".
You shouldn't load images from your disk. We and others can't see it. If you use relative paths and you make sure every images and the HTML file is in the same directory, that should be fine. Even if you do, you must specify the file:// protocol. But if you use external images from a website, we could see them.
There is no <image> element in HTML. It's just <img>.
You should type \\ instead of \, because the \ character has a special meaning. However, Javascript is smart, and you can use / too, don't have to follow Windows' method.
Please don't use the onclick attribute. It's really old. Instead use event listeners.
Right now I don't know what is the problem in your code extacly, however, there is a working example:
<!DOCTYPE html>
<html>
<title>Pic Change</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("button").addEventListener("click", function() {
document.querySelector("img").setAttribute("src", "file://C:/Data/300x300-colored.png");
});
});
</script>
<p><img src="file://C:/Data/300x300.png" /></p>
<p><button type="button">Click!</button></p>
</html>
If both images and the index.html is in the C:\Data directory, it works fine.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>flash video refresh</title>
</head>
<body>
<div id="PlayerZone"><embed height="496" width="580" flashvars="flvid=19742822&createtime=2012-4-19 13:46:33" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#000000" name="player" id="player" src="swf/mine.swf" type="application/x-shockwave-flash"></div>
<a onclick="return test();" id="test">click me popup a div,and hide the scrollbar</a>
</body>
the code upon：
for example,when I click the a#test button,popup a div,it's no problem,but I want to hide the scrollbar while the div popup.
I used $('html').css('overflow','hidden') in test() function,in most browsers can perform it except FF(I used FF3.6) it will refresh the flash.
https://bugzilla.mozilla.org/show_bug.cgi?id=90268
(overflow/display/position cause this bug)
how to fix it?thank you
Hi thanks for asking these kind of question.
Better you use in a updated firefox version and try. if not
please refer this link this will help u i think. use local shared objects.
http://www.actionscript.org/forums/showthread.php3?t=79009
http://flash.bigresource.com/How-to-protect-Flash-Videos-from-Being-Downloaded-KV9j8rfkn.html
http://whatisgon.wordpress.com/2010/03/17/poking-around-in-the-firefox-cache-and-protecting-your-privacy-from-flash/
I have a web application that is dynamically loading PDF files for viewing in the browser.
Currently, it uses "innerHTML" to replace a div with the PDF Object. This works.
But, is there a better way to get the ID of the element and set the "src" or "data" parameter for the Object / Embed and have it instantly load up a new document?
I'm hoping the instance of Adobe Acrobat Reader will stay on the screen, but the new document will load into it.
Here is a JavaScript example of the object:
document.getElementById(`divPDF`).innerHTML = `<OBJECT id='objPDF' DATA="'+strFilename+'" TYPE="application/pdf" TITLE="IMAGING" WIDTH="100%" HEIGHT="100%"></object>`;
Any insight is appreciated.
I am not sure if this will work, as I have not tried this out in my projects.
(Looking at your JS, I believe you are using jQuery. If not, please correct me)
Once you have populated the divPDF with the object you might try the code below:
$("objPDF").attr({
data: "dir/to/newPDF"
});
Again, I am not sure if this will work for your particular needs but if you attach this code to an event handler you can switch out the data of the object.
You could also wrap it in a function to be used over and over again:
function pdfLoad(dirToPDF) {
$("objPDF").attr({
data: dirToPDF
});
}
If the handler for the PDF is acrobat (it doesn't have to be), it exposes a JS interface that is documented here:
http://www.adobe.com/devnet/acrobat/pdfs/js_api_reference.pdf
See if you can call openDoc(urlToPdf) on document.getElementById('objPDF') -- even if this works, it only works when Acrobat is being used to handle 'application/pdf'
#lark
A slight correction:
$('#objPDF').attr('data','dirToPDF');
The # specifies the objPDF is an ID and not an element name. Though I still don't know if this will work.
#Tristan
Take a look at the jQuery Media plugin. It mentions support for PDF as well, though I have never used it.
Open a PDF-Link in a external window PDFN with a external PDF-Reader.EXE:
Clicking on the following button:
<FORM action="">
<INPUT type="button" value="PDF file"
onclick="window.open('http://www.Dku-betrieb.eu/Pdfn.html',
'PDFN', 'width=620, height=630')">
</FORM>
opens this frameset Pdfn.html in an external window:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="de">
<meta http-equiv="refresh" content="12;url=http://www.dku-betrieb.eu/Pdfn1.html">
<head>
<title>Reader</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset>
<frame src="http://www.dku-betrieb.eu/File.pdf" frameborder=0 name="p1">
</frameset>
</HTML>
which refreshes in 12 seconds to the download of the PDF-Reader:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="de">
<head>
<title>Reader</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset >
<frame src="http://www.dku-betrieb.eu/PDFReader.exe" frameborder=0 name="p2">
</frameset>
</HTML>
showing as result the PDF-file in the external window PDFN.
function pdfLoad(datasrc) {
var x = document.getElementById('objPDF');
x.data = datasrc;
}
This worked for me