CODEWITHSUNDEEP
cssiframeyoutube
user723805
user723805

Reputation:

How to hide youtube iframe using CSS

My site is optimized for desktop and mobile. Most of my post has youtube videos. I like to hide Youtube videos in my mobile site since it kills the design.

Here is the sample Youtube Embed code...

<iframe width="420" height="315" src="http://www.youtube.com/embed/0IiB2rNSFfM" frameborder="0" allowfullscreen></iframe>

I tried using the following CSS in mobile site...

iframe{
    display:none;
}

This code hides youtube videos as well as ads in mobile site...

Please help me to how to hide only youtube videos using CSS???

Upvotes: 2

Views: 12567

Answers (1)

Sarfraz
Sarfraz

Reputation: 382606

You can use media queries:

@media screen and (min-width: 320px) { iframe { display:none; }}

You should set min-width to value of width of devices/mobiles you want to hide iframe in.

Note that you can have multiple media queries for different screen sizes.

More Info:

Upvotes: 2

Related Questions