CODEWITHSUNDEEP
cssmobileiframe
Nick
Nick

Reputation: 474

Mobile Embedded Youtube Iframe not playing

I have a youtube iframe video on my site that will not play, but only on mobile (i'm using iOS7 on iPhone5). It works fine in the desktop browsers that I have tested it on, so Im not sure why it won't play, only on my mobile device. I never tested it on iOS6.

I am using media queries to control the width and height of the iframe, but cant see why that would create a problem (furthermore, the media queries work fine with the video on desktop).. Do you have any ideas as to why it won't play? You can see an example of the problem at http://nickbewley.com/music/lee-fields/. Thanks for any ideas!

Upvotes: 1

Views: 2188

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240928

The following div is overlapping it.. You are unable to click/touch it to play.

<div class="music-description">My Favorite Album by Lee Fields: </div>

Forget the z-index that is just masking the issue. Instead fix the problem:

.music-description {
    display: block; /* REMOVE */
}

.music-title {
    display: inline; /* REMOVE */
    display: block; /* ADD */
}

Or just change the span tags to divs (referring to .music-title)

Doing this will give you the style you were looking for.

enter image description here

Upvotes: 1

Related Questions