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:
Related
I'm currently updating a website for a friend to support on page streaming.
The technology of choice is twitch, and I'm kind of tied to tumblr for the hosting.
So the issue is this, I wrote the code for embedding twitch, plus some css to meet specifications (he wants a gif of tv static on top of the video player while it's not loaded). It works fine in local, but when uploading it to tumblr I get 9 duplicates of the code I'm uploading.
The HTML is organized with sections and articles, the whole thing (player + gif mask) has thus been put into an article to match the layout and exploit the site's native css/js.
Here is the code I'm trying to upload.
<article class="entry fat-TV-container">
<div class="TV-label">
</div>
<div class="media" >
<div id="twitch-player-mask" style="position: absolute; height:1rem; width:100%" >
<img class="test-player-item" src="Content/Static.gif" style="height:500px">
</div>
<iframe
id="fat-TV"
class="test-player-item"
src="https://player.twitch.tv/?channel=fatzrh"
height="300"
width="100%"
frameborder="0"
scrolling="no"
allowfullscreen="true"
position="absolute"
>
</iframe>
</div>
JS
<script type="text/javascript">
document.getElementById("twitch-player-mask").addEventListener("Twitch.Player.ONLINE", function (){
var elem= document.getElementById("twitch-player-mask");
elem.style.display="none";
});
document.getElementById("twitch-player-mask").addEventListener("Twitch.Player.OFFLINE",function (){
var elem= document.getElementById("twitch-player-mask");
elem.style.display="initial";
});</script>
CSS
.player-item {
object-position: center;
padding-left: 28.5%;
padding-right: 28.5%;}
.test-player-item {
object-position: center;
}
.fat-TV-container:hover #twitch-player-mask
{
display: none;
}
Do you have any idea about what's wrong with either the code or tumblr?
EDIT: Solved.
For further reference, if somebody stumbles into the issue, try putting whatever you're adding to tumblr's html outside the {Block:Posts}{/Block:Posts} tags, since otherwise it's gonna apply the code to all the posts in the page.
this is the index.html code..
<body><iframe name="sample" src="first.html" width="100%" height="100%" frameborder="0" id="sample" /></body>
first.html code is...
<body>
<div style="width:100%; height: 1900px; background: yellow;"></div>
<br>
second
</body>
second.html code is
<body><div style="width:100%; height: 1100px; background: blue;"></div>
<br>
first</body>
Now what i want is to make the index page render the whole first.html and second.html in full-height. somehow the iframe height must adjust to the corresponding height of webpage it is holding.
How to do this?
Dealing with iframe dimensions can be a bit of a pain. This isn't exactly an answer, but hopefully it will point you in the right direction.
Are you the author (or do you have access to the author) of the iframe? If so a solution like this should work.
I'd also give this library (or one of its 58 forks) a look over for some inspiration. In my experience, the post-message API has been useful when working with iFrames, which is what the library above is build on top of.
Hope that helps!
I have added a PDF to a webpage using the embed tag. The width of the embed window is smaller than the width of the PDF. So, A horizontal scroll bar appears. However, there are wide margins on the left and the right of the PDF document itself. If user scrolls center to the PDF, the PDF's content fits perfectly.
I would like to have this scrolling happen automatically if possible.
The code is here http://shop.stelladoradus.com/product/gsm-repeater/
You must click on the specification tab to see the PDF.
For google chrome I did the following:
I used an Iframe instead of the embed
<iframe id='pdf_embed' height='1300' style='width: 734px; margin-left: -40px;' src='iframe_url?pdf=pdf_url.'></iframe>
on the iframe page I have:
<style>
object{
width: 200%;
margin-left: -370px;
margin-top: -150px;
}
embed{
width:100%;
height:95%;
}
</style>
<html>
<body >
<object height='1430' data="<?php echo $_GET['pdf']; ?>" type="application/pdf">
<embed height='1430' src="<?php echo $_GET['pdf']; ?>" type="application/pdf" />
</object>
</body>
</html>
This solution is actually exactly what I was looking for, as the pdf is zoomed in so the margins aren't showing, and its easier to read (bigger text). I couldn't get it to work for firefox or IE, for that you can use #Infer-On solution below.
Ok I think you have only to pass some paramenters to your PDF, as specified from documentation:
You could try something like this:
zoom=scale
Sets the zoom and scroll factors, using float or integer values. For
example, a scale value of 100 indicates a zoom value of 100%.
or else
view=Fit
Set the view of the displayed page, using the keyword values defined
in the PDF language specification. For more information, see the PDF
Reference.
See the related documentation to find the parameter will better fit for you
http://example.org/doc.pdf#zoom=50
http://example.org/doc.pdf#view=Fit,100
EDIT
What i already tried:
<object data="http://www.stelladoradus.com/wp-content/uploads/2014/03/en_spec_RP1000G3.pdf"
type="application/pdf"
width="300" height="500">
<param name="view" value="fit" />
</object>
http://jsfiddle.net/InferOn/wVaGa/23/
this works, but not in Chrome...
I'm using Alfresco 4.2b
I've a issue. When using some browsers (chrome by now) the document preview shows collapsed (it have the document but it is at 38px height)
The div that contains the embed field has a height in "style" that is always in 38px (also if i try to change it in firebug, it returns to 38px)
<div id="template_x002e_web-preview_x002e_document-details_x0023_default-full-window-div" style="position: absolute; left: 10px; top: 226px; width: 824px; height: 38px;" class="web-preview real">
<embed type="application/x-shockwave-flash" src="/share/components/preview/WebPreviewer.swf" width="100%" height="100%" style="" id="WebPreviewer_template_x002e_web-preview_x002e_document-details_x0023_default" name="WebPreviewer_template_x002e_web-preview_x002e_document-details_x0023_default" quality="high" allowscriptaccess="sameDomain" allowfullscreen="true" wmode="transparent" flashvars="fileName=Minuta2.docx&paging=true&url=http%3A%2F%2Fintra.jaimeillanes.cl%2Fshare%2Fproxy%2Falfresco%2Fapi%2Fnode%2Fworkspace%2FSpacesStore%2F0a41947e-5054-4c6d-a861-caa7b0bb07e2%2Fcontent%2Fthumbnails%2Fwebpreview%3Fc%3Dforce%26lastModified%3Dwebpreview%253A1356554282043&jsCallback=Alfresco.util.ComponentManager.get('template_x002e_web-preview_x002e_document-details_x0023_default').plugin.onWebPreviewerEvent&jsLogger=Alfresco.util.ComponentManager.get('template_x002e_web-preview_x002e_document-details_x0023_default').plugin.onWebPreviewerLogging&i18n_actualSize=Tama%C3%B1o%20actual&i18n_fitPage=Adaptar%20a%20la%20p%C3%A1gina&i18n_fitWidth=Adaptar%20a%20lo%20ancho&i18n_fitHeight=Adaptar%20a%20lo%20alto&i18n_fullscreen=Pantalla%20completa&i18n_fullwindow=Maximizar&i18n_fullwindow_escape=Pulse%20la%20tecla%20Esc%20para%20salir%20del%20modo%20de%20pantalla%20completa&i18n_page=P%C3%A1gina&i18n_pageOf=de&show_fullscreen_button=true&show_fullwindow_button=true&disable_i18n_input_fix=false">
</div>
I've been searching but i can't find anything.
I think you need to search a bit 'deeper' in Alfresco.
Check the flash previewer freemarker template which is injected in the document-details template (xml). In that ftl or a reference to another one should be the div your referring to.
See https://issues.alfresco.com/jira/browse/ALF-16914, is that your issue?
You would be recommended to upgrade to the latest 4.2 version, where I believe it is fixed. Alternatively you could try removing the file tablet.css file which it seems triggers the problem (note this could have unintended side-effects, however!).
On some pages the twitter share button is not showing its full width. I have traced the problem, the iframe in which it is displayed is only set to 24px width, however i need to set it to the correct width. Problem is.. I have no access to the iframe directly since this is the code to insert it:
<div style="margin:4px 0 0 5px; float:left; position: relative;">Tweet</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div><!-- END #socialNetworking -->
<script>
Does anybody know how I can edit the iframe? The generated HTML does not show the iframe, however digging into the html inspector on chrome web dev tools, i can see it there:
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.1347008535.html#_=1347624904492&count=none&id=twitter-widget-0&lang=en&original_referer=http%3A%2F%2Fwww.dgfdg.co.uk%2F&size=m&text=Web%20Design%20Kendal%20%7C%20Website%20Design%20Cumbria%20%7C%20Graphic%20Design%20%7C%20Marketing%20%7C%20Advertising%20%7C%20Designworks%20%7C&url=http%3A%2F%2Fwww.fdfdg.co.uk%2F" class="twitter-share-button twitter-count-none" style="width: 24px; height: 20px; " title="Twitter Tweet Button" data-twttr-rendered="true"></iframe>
Look at https://dev.twitter.com/docs/tweet-button, I think it's the "size" attribute you're looking for. It only accepts categorical values, though. I don't think you can set it to some arbitrary size.