@navinachettri this is not a BuddyPress issue and more like a theme issue. Please check if the issue is resolved if you change to the Twenty Fourteen theme. If it is, then do post at the theme author’s site.
Hi @mercime
I did the check with twenty fourteen theme…problem persists.
My IE version is 11
Hi @navinachettri
Depending on how the z-index property is applied (if it’s an inline style then JavaScript will be required to remove it), you can override it in your stylesheet. For example:
#page-element-to-override {
z-index: 9;
}
Hi @henrywright
I have already tried the solution suggested but it does not work. The issue is only with IE.
The issue is only with IE
Isn’t it always? 🙂
Do you have a link to an example of what’s happening?
I dont have a link but I can show you what is happening. You can find it here…
http://picpaste.com/paste-MRaMk5bj.png
Unfortunately, that doesn’t help. I wanted to take a look at the source.
This is not a z-index issue as such, it’s a very old problem that has been around for ages and is to do with managing the parameters for this object, the correct or intended behaviour is for flash player to hover as it were on the page independent of the natural stacking order of the dom elements. Adding the parameter wmode=”opaque” overrides this and sets the player into the page – flattens it where it should then observe the stacking order or applied z-indices.
The issue is going to be accessing the elements to add this parameter.
If you search around you would eventually find this post on WP forums, which includes the rather convoluted solution to forcing the iframe element to work with wmode=opaque
https://wordpress.org/support/topic/help-adding-wmodetransparent-to-oembeds ( the post appears to suggest the question might have been asked here in the past? search?)
I’ll copy the pastebin example function here for your convenience, use at your own risk 🙂
add_filter( 'the_content' , 'mh_youtube_wmode' , 15 );
function mh_youtube_wmode( $content ) {
// Regex to find all <ifram ... > YouTube tags
$mh_youtube_regex = "/\<iframe .*youtube\.com.*><\/iframe>/";
// Populate the results into an array
preg_match_all( $mh_youtube_regex , $content, $mh_matches );
// If we get any hits then put the update the results
if ( $mh_matches ) {;
for ( $mh_count = 0; $mh_count < count( $mh_matches[0] ); $mh_count++ )
{
// Old YouTube iframe
$mh_old = $mh_matches[0][$mh_count];
$mh_new = str_replace( "?feature=oembed" , "?wmode=transparent" , $mh_old );
$mh_new = preg_replace( '/\><\/iframe>$/' , ' wmode="Opaque"></iframe>' , $mh_new );
// make the substitution
$content = str_replace( $mh_old, $mh_new , $content );
}
}
return $content;
}
This doesn’t include solutions for BP oembeds though, the whole function could do with scrutiny and perhaps updating a little.
As I thought we had covered something similar to this in the distant past:
https://buddypress.org/support/topic/set-wmodetransparent-for-oembed-plugin/
Based on that I’ve re-worked things to something a lot lot simpler which appears to work, but testing in these circs is going to be minimal so there may be issues – this would be dropped into your functions.php file in theme.
function ie_oembed_wmode( $embed ) {
$embed = str_replace( '?feature=oembed', '?feature=oembed&wmode=opaque', $embed);
return $embed;
}
add_filter( 'embed_oembed_html', 'ie_oembed_wmode', 15 );
Is IE the latest version and are all of the updates installed? I had that issue until I upgraded my IE and downloaded “ALL” of the updates. Everything displays “OK” after that.
To be honest with you IE is never gonna display anything 100% from what I’ve seen because not every user has the latest and most updated IE.
IE is below web standards from what I heard and perfectly fine themes will appear broken on it.
Is IE the latest version and are all of the updates installed? I had that issue until I upgraded my IE and downloaded “ALL” of the updates. Everything displays “OK” after that.
The problem will still exist for anyone using the old version of IE. There are so many problems unique to that browser, especially early versions. It’s a pain to support. I’ve personally recently dropped supporting IE version 8 and under – if anyone is using that browser then I usually just suggest they upgrade (if possible at their end)
Ok try this.
If that widget is PHP, try using iframe height and width to keep it within the range.
<iframe width=”558″ height=”314″ <—example
Or you can also have it set to AUTO.
<iframe width=”auto” height=”auto” src=”//www.youtube.com/embed/sAfYw3zp8PU?autoplay=0″ frameborder=”0″ allowfullscreen></iframe>
This will cause the embed to auto-size perfectly and beautifully to the side bars or containers anywhere.
That’s my solution to the media issue. I’ve resized all the imbeds to a certain height and width to prevent it from stacking or becoming over sized.
It works even inside the loop too because its just an iframe imbed.
Problem is, with auto embeds or ‘oEmbed’, the markup is delivered straight from Youtube’s server. You can’t modify it unless you use JavaScript or a filter (as @hnla suggested earlier in the thread)
Oh i see, it’s a comment.<–rubs his eyes.
