We Keep Coding

Remove unused Javascript base.js (Youtube iframe api)

Google PageSpeedInsights flags Base.js as unused Javascript in my report. It's pretty substantial at 487kb. Appears to come from including the Youtube player iframe api. Is this file needed and if so, does anyone know why it is being flagged as unused JS in the report?
Iframe API: https://developers.google.com/youtube/iframe_api_reference
Large file that gets flagged on PageSpeedInsights as unused JS:
https://www.youtube.com/s/player/c88a8657/player_ias.vflset/en_US/base.js

If a script is listed under the "Remove Unused Javascript" tab, it doesn't mean the entire script is unused, it means a certain amount of the script's code isn't doing anything on the page.
The algorithm for finding unused code isn't perfect either, I often see scripts that aren't used at all on a page having some sort amount of used code according to google.
The "Remove Unused Javascript" should really be taken with a pinch of salt, and in cases of plugins, like youtube's API, it should be ignored since you can't edit a external API to be more efficient.
In your case, the file is very much needed if your using an embedded Youtube video.
If you want to optmize how you load your Youtube video, consider lazyloading it.

If you want to fix it with just HTML you can setup the embed to load when the video clicked using the srcdoc attribute.
You basically write an HTML link inside the attribute and the video won't load until the link inside srcdoc is clicked.
Here's an example:
<!-- Reference: https://vumbnail.com/examples/srcdoc-iframe-for-lighthouse -->
<iframe
srcdoc="
<style>
body, .full {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
display: flex;
justify-content: center;
object-fit: cover;
}
</style>
<a
href='https://www.youtube.com/embed/Q-X_ED4LHrQ?autoplay=1'
class='full'
>
<img
src='https://vumbnail.com/Q-X_ED4LHrQ.jpg'
class='full'
/>
<svg
version='1.1'
viewBox='0 0 68 48'
width='68px'
style='position: relative;'
>
<path d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='#f00'></path>
<path d='M 45,24 27,14 27,34' fill='#fff'></path>
</svg>
</a>
"
style="max-width: 640px; width: 100%; aspect-ratio: 16/9;"
frameborder="0"
></iframe>
It can be a bit clunky to write HTML inside an attribute but it gets the job done.
If you don't want to have to go in and replace all the YouTube IDs I wrote a simple builder here: https://vumbnail.com/embed-builder

I have been looking for 2 days to find a way to download YouTube videos, and I found out that this file is really important, because it loads all video/audio files:

How to stretch a fabric canvas to the full width of its parent div

current situation
I have a fabric canvas placed inside a parent div. how can i stretch the canvas to the full width and height of its parent
Here is what my code look likes:
<div class="design_editor_div">
<canvas id="c" width="500" height="500" style="border-style:dashed;border-color:#a1a1a1;text-
align:center;border-width:initial;"></canvas>
<img src="{{ '2.png' | asset_url }}" title="" alt="" style="display: none" id="img">
</div>

You can use css and select the child element of the div as such:
canvas > div {
display: block;
width: 100%;
height: 100%;
}
For sure, use a seperate stylesheet and include a <link>path-to-stylesheet</link> in the head or <style> css... </style> tags in the head of your html document. Inline CSS styles should be reserved for elements that you need to alter that are very unique, such as making part of a or <p> element <strong> or <u>. Including many <style> tags inline will impact the readability of the tag.

Change image on mouse over

<img onmouseover="http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png"
align="right"
alt="facebook"
name="facebook"
width="231"
height="231"
border="0"
id="facebook"
style="margin-top: -12px; margin-right: -60px;">
Its not working. It comes up as a box, not a broken image but a box which doesn't display the image. I'm adding it to my website, could i be putting it in the wrong place? Also, i put it in my forum wrapper and i want the image to be displayed and when you hover your mouse over it so it changes to image 2 please help.

If you intend the image to change on mouseover, you can use this:
<img onmouseover="this.src='http://www.habbohut.com/_images/_content/_habbohut/facebook_sign.png'"
onmouseout="this.src='http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png'"
src="http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png"
align="right"
alt="facebook"
name="facebook"
width="231"
height="231"
border="0"
id="facebook"
style="margin-top: -12px; margin-right: -60px;">
this.src='something'
will set the image src to something.
However, it would be prettier to use CSS and have it as background image, then it will work without javascript.

Please use some CSS, that inline style code gets so confusing.
If you want to do it the nice way do something like this:
#facebook {
background: url("http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png") no-repeat;
width: 231px;
height: 231px;
margin-top: -12px;
margin-right: -60px;
}
#facebook:hover {
background: url("http://www.habbohut.com/_images/_content/_habbohut/facebook_sign.png") no-repeat;
}
<div id="facebook"></div>

This may not be right but from looking at your code your img script doesnt end.
You need to have />

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 */

roll over effect, show another image

I have an href image in this markup.
<div class="imgdiv">
<a class="imga" href="http://destination.com">
<img src="http://image.com/image.jpg" width="100" height="100">
</a>
</div>
When I hover over it, I want to show another image in the top right corner. Is this doable with css? or do I need javascript for that?
My CSS looks like this but it still doesn't work
a.imga:hover {
background-image: url('over.png');
background-position: top;
z-index:3;
}

**Here is the solution you can try**
<div class="imgdiv">
<a class="imga" href="http://destination.com">
<img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" width="100" height="100">
</a>
</div>

Use can do it with CSS, but insted of img tag use a DIV with a background image
<div id="image"></div>
CSS style
#image{
width: 100px; //Image height
height: 100px; //Image width
background: url('') 0 0 no-repeat; //Give your image path here
}
#image:hover{
background: url('') 0 0 no-repeat;
}

Try CSS Sprites, check out this screen-cast from css-tricks.com on how to use them.

You can use :hover pseduo selector on the div with class imgdiv with background-position set appropriately to show on the top right corner. Off course, you should apply background-image to the div first.
Note that :hover does not work in IE6 for anything other than links. However, you can overcome this limitation by using javascript/jquery.