WPBakery Video Background Autoplay not working - wordpress

I'm working on some websites that are using the WPBakery video background on rows. These should autoplay, and did until recently. Sometimes they do, and sometimes they don't. Typically it happens where they don't work more when I'm looking at them via Incognito mode on Chrome. I'm aware of the changes a couple years ago for autoplaying needing to include muted, and I've tried to hack this to add muted to the allow, but because it comes in via an iframe, it adds it too late for the autoplay to start.
Example Sites:
https://www.infrastructurereportcard.org/
https://brgcommunications.com/
https://colorworksinc.com/
I haven't seen other questions on this, but the fact that I'm seeing it on three totally different sites means that it is likely a larger issue.
Below is a bit of code that I tried, but wasn't successful in getting it to actually autoplay. It gave me an error of .play() is not a function.
<script type="text/javascript">
jQuery(function($) {
$(window).load(function(){
$('#widget2').attr('allow', 'muted accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
$('#widget2').play();
});
});
</script>

I think there's two parts of the WPBakery plugin's video background not working properly.
Video's with a Youtube-embed link are not working properly.
Video's stop autoplaying when using the same URL.
The first one is fixable by only using the URL's without embed. Something like: https://www.youtube.com/watch?v=XXXXXXXXX
The second one is fixable by creating a unique URL every time you load the page. This can be done by the following code:
function startVideo() {​​​​​​​
const date = $('.video-wrapper').data('date');
let src = $('.video-wrapper iframe').attr('src');
src = src + '&autoplay=1&randomVar=' + date;
$('.video-wrapper iframe').attr('src', src);
}​​​​​​​
This will take the existing url of the iframe, add the current date which is available on the wrapper and regenerate the video's url. This way the URL is always unique and will autoplay. You can also just generate a date manually and add that as a random param on the URL.
Hope this is of any help!

Related

Dynamically update a youtube playlist on a website

OK I'm trying to develop a website that includes a youtube playlist. Later it should be possible for every person (in my local network) who visits the website to add songs to this playlist. I will use the youtube-api and probable php or python for this.
Now I've included the playlist via an <iframe> tag and stumbled across a big problem. If I now add more songs to this playlist (over youtube itself), they will of course only be added to the playlist on my website, when I reload the complete website. And if I just reload the div with the <iframe> for example, the problem is that the playlist starts all over again at the first song.
Is there a way I can dynamically update the playlist on my website? So that the playlist does not start again from the beginning, the current playing remains and new added songs are actually added "live" to the playlist?
Here the <iframe> tag if it helps:
<iframe id="playlist" src="https://www.youtube.com/embed/videoseries?list=PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
A way I suggest is:
(Before updating the div which contains the iframe), you need to get both the current playing video and the current time of the playing video.1
(Once you had added the video to the playlist and get the values I mentioned in the previous lines), update the div element (by modifying the src value of your iframe).
A example could be like this:
You have a playlist which id is: PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2.
The current playing video is: 51iquRYKPbs
When you right-click on the playing video 51iquRYKPbs you'll get the Copy URL video at current time option.
Once selected the Copy URL video at current time option, you'lll get a URL like this:
youtu.be/51iquRYKPbs?list=PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2&t=80
Check the highlighted values - you'll need them for reload your iframe.
Your current iframe src value is as follows:
https://www.youtube.com/embed/videoseries?list=PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2
(No modifications yet).
For reload the iframe with the applied changes, set your iframe src as follows:
https://www.youtube.com/embed/51iquRYKPbs?list=PLZCHH_4VqpRhMW1K9I1hbgBRmmlWdyK3k&autoplay=1&start=80
(Once you change the src value of your iframe, it will reload with the changes made and it will continue playing the video in the specified time).
The changes made to the src value are explained next:
Set the videoId value of the video which was playing (before complete the reload).
Set the start value of the video for continue playing at the specified time.
the autoplay=1 is needed for play the video at the specified time.
1 About how get the current playing video and the current time of the playing video is a complete new question and it will depend in which language you're handling all the YouTube stuff in your website - (since you mentioned in your question that you will use php or python).

Random Facebook pixel error messages

For the past few weeks I've noticed that in a client's website WordPress dashboard, when I click on the Search box, I get a huge mess of error messages popping up across the screen. The error messages all start with "Error: Multiple pixels with conflicting versions were detected on this page." When I google this error message I get lots of discussion about something called "Facebook Pixel," but to my knowledge there is no such thing installed on this site. I see nothing of the sort in the Plugins page and the vast majority of changes to this site (other than creating posts) is done by me, and I have never heard of Facebook Pixel until this came up. I imagine it might be some plugin conflict, but as I said, no one to my knowledge knowingly installed Facebook Pixel. I don't know where to look to straighten this out. The site performance seems to be unaffected, but clearly something is out of whack in the back end.
I had a screenshot ready, but I apparently need a "reputation" of 10 to add it to the post, sorry!
"Facebook Pixel" is a snippet of code that looks like this:
<script>(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
_fbq.push(['addPixelId', "1234567890"]);
})();
window._fbq = window._fbq || [];
window._fbq.push(["track", "PixelInitialized", {}]);
</script>
<noscript><img height="1" width="1" border="0" alt="" style="display:none" src="https://www.facebook.com/tr?id=1234567890&ev=NoScript" /></noscript>
It's not necessarily added by a plugin. Check to make sure whether or not it's been added into any "Header Scripts" sections of your website (or even "Footer Scripts" or "Body Scripts"). There may be a "custom scripts" plugin in your site, or they were added directly in a theme or plugin file.
I believe these errors can also be triggered by iframes - so if you have any embeds or iframes on your site, make sure they aren't the ones that have the pixel errors.
I ran into this or something similar as well. Perhaps this will solve your problem.
The form auto fill settings in chrome were causing this error. More Tools >> Clear browsing data... >> Check "Autofill form data" For some reason this was populating a Error: Multiple pixels with conflicting versions were detected on this page error in the search auto complete.

The parameters 'showinfo' and 'rel' doesnt work with the new player version

When I set the config to the iframe with the new player version, it doesn't work.
I'm setting the config on this way on the iframe URL:
<iframe src="{{url}}?controls=0&playsinline=1&autoplay=0&showinfo=0&rel=0&modestbranding=0&enablejsapi=1&widgetid=1" ... />
This is the gist of the debug info of the player
Anyone have a clue about this? I really appreciate any help.
This seems to have been fixed. After clearing the browser data both the player on my site and the Youtube Player Demo are working as expected. When setting rel=0 and showinfo=0 for the url in the iframe, the title and the related videos disappear.
Just an update in case you experience any new behaviour with the mentioned parameters.
According to: https://developers.google.com/youtube/player_parameters#release_notes_08_23_2018
showInfo is now deprecated & the default behaviour of rel has changed so 0 no longer disables videos instead it shows additional videos from the same channel.

youtube-iframe-api closed captioning troubles

Spent a better part of yesterday 6/12/2017 trying figure out why my captioning was not working when I was using the YouTube iframe embed code (generated from the Share > Embed button).
After much experimentation, I narrowed the problem down to what has already been identified. Closed captioning was not working as the captioning was automatically generated. Once I manually created the closed captioning, everything seemed to work fine. I didn't even have to use the cc_load_policy=1 parameter.
BUT... Today 6/13/2017, I happened to be working with the same video files and all of a sudden I got different behavior. When I play the video from a regular YouTube page, I see the captioning. When I play the video from the iframe embedded players I do not. Tried all sorts of goofy things to get things to work based on reading.
recreated the english closed caption (manually created a blurb at beginning).
set the cc_load_policy=1 parameter
set yt:cc=on as a tag
some other goofy things that are not worth mentioning.
CAPTIONING
note: In both cases the domain was: http://www.youtube.com I could only include 2 links in post.
/watch?v=EExO_6PVIXk
NO CAPTIONING:
/embed/EExO_6PVIXk
/embed/EExO_6PVIXk?cc_load_policy=1
I am at a loss. Any direction would be appreciated.
John
Heard through the grapevine that something changed with the YouTube iFrame API yesterday (6/14/17) where CC started to work.
With some testing, I got mixed results (but am working):
1) As of now (6/15/17), the embed video links now show the CC button and will show CC if you had previously enabled closed captioning (kept track in local storage under "yt-html5-player-modules::subtitlesModuleData::module-enabled".
2) If you provide documented the "cc_load_policy=1" parameter to the URL (of the iFrame embed) closed captioning will show regardless of the value in local storage.
3) What didn't work is me loading the iframe as follows:
<iframe
id="futusign_youtube"
style="visibility: hidden;"
frameborder="0"
src="https://www.youtube.com/embed/XIMLoLxmTDw?enablejsapi=1"
></iframe>
and then trying to set the CC policy in playerVars:
var player = new window.YT.Player('futusign_youtube', {
playerVars: {
'controls': 0,
'enablejsapi': 1,
'showinfo': 0,
'rel': 0,
'cc_load_policy': 1,
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': onPlayerError,
}
});
4) The work-around is to set the cc_load_policy=1 on the URL of the src to the iFrame.
<iframe
id="futusign_youtube"
style="visibility: hidden;"
frameborder="0"
src="https://www.youtube.com/embed/XIMLoLxmTDw?enablejsapi=1&cc_load_policy=1"
></iframe>
I think this might be a duplicate of this problem:
Embed Youtube with Captions on by default not working
...where adding the cc_lang_pref=en option (if you want English) solves the problem.

Trying to use the swfobject.js youtube object inside of WordPress

I need to use the extra powers of the swfobject api. This object is a new way of embedding Youtube videos into web sites.
Pasting code that I found from Google's tutorial directly into the WordPress editor was in-effective. WordPress would not treat this as active code.
So, I created a new template file and inserted my code into that file. This worked relatively well. The code went live and I got the extra feature that I was looking for, which was that I am able to have the visuals of the video autoplay, and to have the sound muted by default.
However, this has messed up the layout and flow of my menus which where just above the video.
Can anyone tell me where to proper place to put this code is, or is this question too specific. If it will help you can see the messed up page at:
http://bestoftimesusa.com/home-mute-test/
and how it is supposed to look at:
http://bestoftimesusa.com
The fully functional code that got embedded is this:
<script type="text/javascript" src="/wp-includes/js/swfobject/swfobject.js"></script>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
var ytplayer = false;
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/IBjstQceGBk?enablejsapi=1&playerapiid=ytplayer&version=3&autoplay=1",
"ytapiplayer", "370", "238", "8", null, null, params, atts);
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.mute();
}
</script>
</div>
Unless you want the same youtube video to appear on all pages (of a certain type), I don't think putting that entire block in your template files makes sense. The only part that really makes sense for a template file is the first line. The lines after that are video-specific.
By default, WordPress filters out javascript from posts. You can disable that filtering with a plugin which would allow you to include javascript in your posts.
Using that plugin, you can set javascript filters on a global or per-post basis. It seems like a per-post basis would work for you so I'd go with that, just enabling it on the page I wanted.
Two last things:
You could put the first line in one of your template files to eliminate having to put that in every post
You have one opening <div> tag but two closing </div> tags, that could be expected, but I'd double check.

Resources