fixing transparent youtube control icons with existing links - api

Something happened few weeks ago that i was unable to tackle myself. There is no information regarding my problem so i have to ask for help.
We have a simple youtube videos embed in our site. However the control icons refuse to show except the one that controls the "mute". The links clearly exists as when you mouse over them you see the popup.
It is not a player size problem since i tried it all.
The problem didn't existed few weeks ago so this is something new and totally over my head. Please help.
I am including a link to a simple html with single embedded video that shows the problem. -> Here
The code itself is this:
<iframe src="http://www.youtube.com/embed?listType=search&list=madonna%20la%20isla%20bonita" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen></iframe>
ps1. I have checked this with Edge and Safari and so far this problem only exists when videos are loaded by Firefox (43.0.4)
ps2. I have updated to Firefox 44.0 and problem still exists.

Related

Why can't I display an embedded video from a YouTube Live stream?

I found a script that lets me use the Youtube API to access a channel, recognise if there is any live stream and give me the id of this specific video that is being broadcasted.
However, when it is embedded on my page as:
<iframe width="500" height="600" src="//www.youtube.com/embed/{$this->live_video_id}{$autoplay}" frameborder="0" allowfullscreen>
I cannot play it. The video shows up, and when I press "play" it gives me a "Playback error".
I removed the $autoplay part because this was giving me problems and it worked! And then it didn't work. It's so frustrating. I copy-pasted the url only in my address bar
www.youtube.com/embed/[Whatever the id is here]
and it worked! And then it didn't work. I just cannot understand why it works sometimes and sometimes not.
Everytime I do something it works for 5 seconds and then it breaks and it doesn't want to show it. When I closed the live stream to try with another one. It showed the old (already archived) live stream. Nonsense!
I read somewhere that you need to embed the video from the live stream, but then the whole idea to use an API is futile. Also I tried enabling AdSense because this could also help, but it didn't.
What can I do to get an embedded YouTube live stream video on my website?
Update:
Since I couldn't figure it out and YouTube tightened their API quota points a lot as of February 2019. I just switched to Twitch API and everything worked from the first try.
You haven't closed the iframe tag
Correction in code
<iframe width="500" height="600" src="//www.youtube.com/embed/{$this->live_video_id
{$autoplay}" frameborder="0" allowfullscreen></iframe>
Source

Vimeo autoplay not working Safari 11

I've loaded this embed code to our website on the homepage.
https://player.vimeo.com/video/254985863?autoplay=1&loop=1&autopause=0&background=1" width="1903" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
You can see the site here
The video autoplays perfectly everywhere except Safari. In Safari it just loads the cover image. I am guessing that safari 11 thinks the video has sound but it doesn't. Is there a setting to show safari that this is a muted video?
I believe this is a very recent Safari bug, possibly in 11.0.3 or 11.0.2. I've just reported this to Apple, please do the same so that they get on it: https://www.apple.com/feedback/safari.html
It's definitely treating the video as if it has sound - if you set the 'Settings for this website' to 'allow all autoplay' then it will work - which is useless because the default is 'Stop Media with sound'
We were experiencing the same issue with Safari (only) for background video and I have been paying close attention to this thread since it was raised back in February (I did report the issue to Apple as suggested) but upon checking the live site again today this is now working correctly once again.
Neither the Vimeo videos or website code has been changed but the videos are now playing in Safari as expected (previously it was displaying a static image only). I am still running the same version of Safari as I was before, when this was an issue (11.0.3), so I can only assume that something has changed on the Vimeo embed side of things. Perhaps they have updated the mute code.
It is now working correctly again, but I can find no mention of anything changing on the Vimeo side.
on https://www.apple.com/safari/
"Stop auto-play videos.
Safari prevents unexpected and unwanted videos with audio from automatically playing while you browse. Just click the play button if you want to view them. Have a favorite site where you always want videos to play? Use per‑site settings in Safari to enable media auto-play."

Bing map bug on Safari 7 (or Safari bug?)

I am displaying a set of properties on Bing map. It works all fine in Chrome, FireFox, IE, and Safari on Windows (version is 5.1.7 - their latest version for Windows). But it doesn't work in Safari 7 on Mac.
When displayed correctly, all properties are located on a green residential area. But on Safari 7, all properties are displayed on the far left of that area - on a totally wrong location. Also, the larger left part of the map is blank (there is no map!).
I saw a similar post Bing Maps Issue on Safari 7. The left part of their map is also blank. The problem there seems not solved. I followed Microsoft's guideline (meta, CSS position/width/height etc), none of them work.
I suspect that's a Bing bug? Or a Safari bug?
Sorry I don't have enough reputation to post images...
Now that I solve the problem, I confirm that this is NOT a bug of Safari or Bing.
the <div> that load the the map is embedded in many other divs, panels, fieldset, Telerik ajax panel, RadTabStrip etc. You have to remove some of divs, and also some styles of divs to make it work. It's tricky, you have to do many tests to finally pin down which element caused the problem and remove that element.
I took me several days to figure this out.

Forced to switch from iframe to SDK for share buttons

I was using an iframe share button solution to be able to share products or posts on facebook. I used this systeme wich worked great on about 10 different websites but this week, they all ended up no working.
I read I should get an appId for each website and use Asynchroneous SDK, which I did, and followed steps to get it to work:
Load the SDK with appId authentification.
Load jQuery if needed (some buttons require it).
Add button code were desired.
I can see the SDK is loaded in <div id="fb-root"></div> but the share button never appears on the page and it is not a layout issue. I have tried several different buttons but they all seam to never make it to the user.
I read a lot of posts about the issue but each one was magically solved on Jully 22nd... not mine. I need help implementing this first button as I need to fix many websites afterwards. Thx!
When doing a fresh implementation of FB btns I ended up going here:
https://developers.facebook.com/tools/debug
to force FB to crowl the pages I was working on at the moment.
This proved usedful in getting immediate feedback on how things were working out.

EasySlider 1.7 - IE9 breaks it by blocking scripts

I've been playing around with EasySlider and everything was working perfectly - until I viewed my site in IE9.
Instead of displaying the slider with 3 images sliding across, it displayed all 3 images sat one underneath the other, and a message at the bottom of the screen saying that scripts etc had been blocked and did I want to allow blocked content.
As I was using this in the hear of my website it pushed my whole site down the page and just looked stupid with the 3 banners on top of each other.
I realise I can get rid of this by unblocking the content, but that's not the point. I think this is the default security settings for IE so everyone that visits my site will see it like this for the first time (or everytime if they don't unblock the content).
So is there a way around this? Or at least a way that if the script is blocked only the first image is shown instead of all of them? This seems a pretty big flaw!
I had the same issue as you and found a very simple solution for it using CSS. All you need to do is copy and paste the line of CSS code below onto the screen.css stylesheet that came with the EasySlider 1.7 Plugin. I hope this helps.
#slider {
position:relative;
}
I found this solution at the "ClickNathan Handmade Websites".