I have a track on my website which utilizes the soundcloud HTML5 player. I was wondering if there is any way I can make it a little quieter that way it doesn't shock the viewer upon opening my page. If anyone could lead me in the right direction as to how to alter the players volume on soundcloud it would be much appreciated :D
I know it has something to do with javascript: setVolume(volume) but I'm not familiar with JavaScript so if someone could help me out that'd be great. I want the volume to be at 50%.
If need be, i could also use the flash player.
I'm fine with using either HTML5 or flash player, I just want the volume to be set at 50% when someone plays it.
You can do this by using the Widget API
Basically, the widget is embedded into your page with an iframe. Give the iframe an id, include the API library (linked above) and then it's really simple.
SC.Widget('myIframeId').setVolume(50);
Related
Since google updated their way of scoring mobile I have trouble to optimise my websites.
I want to know what am I doing wrong and what should be done to existing sites to make the score higher. Its easy to get 95-100 on desktop but on same site on mobile will be 25...
Before someone says to follow suggestions by insights then I will say that I do and I managed to remove most of them - worst thing is that the score didn't move at all. This is the biggest struggle I have, it seems that whatever I do it wont be good enough...
I followed this guide https://kinsta.com/blog/google-pagespeed-insights/ + some of my own solutions.
Is there anyone that has any good tips or permanent solution for this issue?
Google Report
As evident from your Page Speed Insights report, the main factor responsible for your low score is images. The solution to this is using RESPONSIVE IMAGES, which will drastically improve the speed of your website on mobile. What it basically means is that, you'll have to keep different sizes of the same image available for the browser and browser will decide which version of the image is suited on a particular resolution.
1) Here's everything you need to know about Responsive Images --> Responsive Image (CSS Tricks)
2) You have to shift the <link href=".." .../> and <script> tags from top of the page to the bottom of the page, just after the <body> tag. This will fix the `Eliminate render blocking resources issue.
3) You can use Javascript Minifier to minify your JS. Just paste your existing JS code inside the Input Javascript box on the website and click MINIFY
Also, cache policy is also one of the factors, bringing your score down. An efficient Cache policy will make browsers, load your website faster, after the first load. Cache handling is server specific, its different for Apache, Express etc.
I'm developing HTML5 banner ads for Google AdWords with CSS-animations. Since an ad can only have 30 seconds of animations, the content of the different stages in the animation are often not seen by the users.
Is there a way to find out the viewport of the (cross domain) parent window, so that I can start the animations in my ad's CSS/JS code when it's actually visible to the user ?
Thanks for help!
There are two ways how you can solve your problem.
For the first, you need to edit the code of your cross-domain parent window. If you can't do that, this wont work (which I guess will be the case for you). You would need to add event listeners and use Window.postMessage.
The other way is by using the Intersection Observer API. It's exactly the thing you want and designed for exactly your case, but it's currently not very well supported. For compatibility list check out the link or caniuse.
You could implement this with a simple fallback, if it's not available.
I am creating a website that will display about 6 videos. We are going to display them full screen. At the moment I have them embedded into the website. I was wondering would be be better practice to use an iframe?
I am interested in what you think.
This is my first post here, so apologies if I am posting in the wrong place.
Thanks.
I'm a beginner and I'm trying to use photoswiper in a PhoneGap app. I'm trying to use this example :
[http://jsfiddle.net/Gajotres/PFqVs/][1]
that works great in any browser, but just don't work on any device.
When I open, it's like I have a css issue since I don't see any king of style and when I touch any image, I just see it full size but can't swipe to see the next one.
Any help will be appreciated!
May be you should mention all sites with external resources in the WhiteList?
I'm having problems making FullCalendar fully accessible. I'm using the default month view and can't access the next, previous, and today buttons on the top right without using a mouse. If I run a screen reader, I can access those buttons but not without running the screen reader.
And on another note, I currently am using tool tips that pop up when you mouse over an event title to display more information. If anyone has any tips on how to make those accessible to a screen reader or accessible without a mouse, I'd greatly appreciate it!
Regarding the buttons, I would advice that you write new buttons if accessibility is important. These buttons you could then hook up to your own javascript functions that moves to previous and next.
Check out this documentation example
Regarding the second problem, I think that's the same problem not just for physically impaired but also for things like mobile browsers. My tip would be to avoid onmouseover if the information that appears is really important.