Using javascript with jQuery, I am adding an iframe with a youtube url to display a video on a website however the embed code that gets loaded in the iframe from youtube doesnt have wmode="Opaque", therefore the modal boxes on the page are shown beneath the youtube video.
Any ideas how to solve the issue?
Try adding ?wmode=opaque to the URL or &wmode=opaque if there already is a parameter.
If it doesn't work try this instead, &wmode=transparent which will work in IE browser as well.
Try adding ?wmode=transparent to the end of the URL. Worked for me.
If you are using the new asynchronous API, you will need to add the parameter like so:
<!-- YOUTUBE -->
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
var initialVideo = 'ApkM4t9L5jE'; // YOUR YOUTUBE VIDEO ID
function onYouTubePlayerAPIReady() {
console.log("onYouTubePlayerAPIReady" + initialVideo);
player = new YT.Player('player', {
height: '381',
width: '681',
wmode: 'transparent', // SECRET SAUCE HERE
videoId: initialVideo,
playerVars: { 'autoplay': 1, 'rel': 0, 'wmode':'transparent' },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
This is based on the google documentation and example here:
http://code.google.com/apis/youtube/iframe_api_reference.html
Adding ?wmode=opaque to the URL seems to solve this problem for me, although I have not tested it in IE yet.
For those of you having troubles with the previously proposed solution, note that an inital ampersand will only work if you are already supplying other arguments to the URL. The first argument must have an initial question mark: http://www.example.com?first=foo&second=bar
Add &wmode=transparent to the url and you're done, tested.
I use that technique in my own wordpress plugin YouTube shortcode
Check its source code if you encounter any issue.
Just a tip!--make sure you up the z-index on the element you want to be over the embedded video. I added the wmode querystring, and it still didn't work...until I upped the z-index of the other element. :)
&wmode=opaque didn't work for me (chrome 10) but &wmode=transparent cleared the issue right up.
I know this is an old question, but it still comes up in the top searches for this issue so I'm adding a new answer to help those looking for one for IE:
Adding &wmode=opaque to the end of the URL does NOT work in IE 10...
However, adding ?wmode=opaque does the trick!
Found this solution here: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements
recently I saw that sometimes the flash player doesn't recognize &wmode=opaque, istead you should pass &WMode=opaque too (notice the uppercase).
Related
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!
Google translate has stopped working in Chrome but still working in Firefox. The code is below and it was working for long time before now:
<script>
function googleSectionalElementInit() {
new google.translate.SectionalElement({
sectionalNodeClassName: 'can-translate',
controlNodeClassName: 'translation-control',
background: '#ffffcc'
}, 'google_sectional_element');
}
var url = top.location.href,
pos = url.search(/\/\w\w(\W|$)/),
lang = url.substring(pos+1,pos+3),
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = false;
ga.src = 'https://translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl='+lang;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
</script>
At the moment here is error:
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://translate.googleapis.com/translate_a/l?client=te&alpha=true&hl=en&cb=_callbacks____0jtqeel7c with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.
If it go to the proposed link, here is suggestion:
Make sure these resources are served with a correct "Content-Type" response header from the list below, as well as a "X-Content-Type-Options: nosniff" response header.
Also there is message at https://translate.google.com/intl/en/about/website/
We no longer provide new access to Google Translate's Website Translator. This change does not affect existing use of the Website Translator.
This has affect in Chrome only, code above is Google only and I've no idea where and how to add "X-Content-Type-Options: nosniff".
UPD: there are both of two necessary headers.
Does Google blocked itself and does anyone know how to fix it?
UPD1: Google translate error began to appear and in Firefox 66.0.1 too. It is
The resource from “https://translate.googleapis.com/translate_a/l?client=te&alpha=true&hl=en&cb=_callbacks____0jttrta1j” was blocked due to MIME type (“application/json”) mismatch (X-Content-Type-Options: nosniff).
It looks like some glitch of translation service, after one page refresh it works, after another - server returns incorrect data, json instead of javascript or something like this
At this point, if you manually delete a cookie with the name "NID" for the host .translate.googleapis.com, you can process the page(CORB error disappears)
By the way, repeated page calls also sometimes remove this error. But the solution to the problem is as strange as its occurrence.
Please open a bug via https://crbug.com/new and try to provide as many details as possible:
Did the issue work in Chrome 72 and stopped working in Chrome 73?
Is there a repro page that shows the problem? What is the expected VS observed behavior?
Does the issue repro without any Chrome extensions present?
Does the broken page use AppCache?
I've encountered this issue on multiple sites, it first started on Chrome on my Pixel 2.
The widget does appear on the first load sometimes, if not a reload is all that's required, not even a hard reload. My guess would be that Google are trying to phase the widget out.
The widget does still work without any issues on all other browsers.
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.
this is a small issue that I don't know how to exactly ask, but basically what's happening is I uploaded a custom opentype font, but loading it on the site will leave an empty gap for a couple seconds before loading the actual text. I've seen a couple sites that attacked these issues by loading a local font before changing into the custom font, but I lost track of these (rare-ish) sites to find out how they do it.
How would I fix this issue? Will I have to use some form of javascript to accomplish this task?
Thanks in advance! All answers appreciated!
it`s good question :)
Read this http://paulirish.com/2009/fighting-the-font-face-fout/
And add into or file-script
(if you addded #font-face in your css...):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//load fonts
(function(){
// if firefox 3.5+, hide content till load (or 3 seconds) to prevent FOUT
var d = document, e = d.documentElement, s = d.createElement('style');
if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
s.textContent = 'body{visibility:hidden}';
var r = document.getElementsByTagName('script')[0];
r.parentNode.insertBefore(s, r);
function f(){ s.parentNode && s.parentNode.removeChild(s); }
addEventListener('load',f,false);
setTimeout(f,3000);
}
})();
});
</script>
i prevent fout creating a css file only for the font-face rules and use the link tag in the header of the page just before linking my master css file
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.