Skip to:
Content
Pages
Categories
Search
Top
Bottom

Youtube z-index


  • navinachettri
    Participant

    @navinachettri

    Hi

    The embedded videos seem to have the highest z-index even above the admin bar only in the case if Internet Explorer. How can I resolve this?

Viewing 14 replies - 1 through 14 (of 14 total)

  • @mercime
    Participant

    @mercime

    @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.


    navinachettri
    Participant

    @navinachettri

    Hi @mercime

    I did the check with twenty fourteen theme…problem persists.
    My IE version is 11


    Henry Wright
    Moderator

    @henrywright

    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;
    }

    navinachettri
    Participant

    @navinachettri

    Hi @henrywright

    I have already tried the solution suggested but it does not work. The issue is only with IE.


    Henry Wright
    Moderator

    @henrywright

    The issue is only with IE

    Isn’t it always? πŸ™‚

    Do you have a link to an example of what’s happening?


    navinachettri
    Participant

    @navinachettri

    I dont have a link but I can show you what is happening. You can find it here…

    http://picpaste.com/paste-MRaMk5bj.png


    Henry Wright
    Moderator

    @henrywright

    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 );
    

    cybervang
    Participant

    @cybervang

    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.


    Henry Wright
    Moderator

    @henrywright

    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)


    cybervang
    Participant

    @cybervang

    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.


    Henry Wright
    Moderator

    @henrywright

    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)


    cybervang
    Participant

    @cybervang

    Oh i see, it’s a comment.<–rubs his eyes.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Youtube z-index’ is closed to new replies.
Skip to toolbar