CODEWITHSUNDEEP
htmlcssresponsive-design
CoreyUXD
CoreyUXD

Reputation: 11

Making iframe responsive with media query

I am working on a project to display both html5 and Iframes in the same div container. The intended use of this code is to display autoplay video on our home page both for mobile and desktop versions. The block is smaller that 375px on desktop and due to mobile restrictions we cannot display html5 autoplay video so we will will include a iframe with a video link, the mobile block is greater than 375px

I have got the media queries to work in my test but i cannot figure out how to make my iframe position responsive with the position relative and absolute method 

<style>
@media only screen and (min-width: 375px) {
#iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#iframe {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
 }
#video {
display: none;
}}
@media only screen and (max-width: 375px) {
#video {
 display: block;  
 }
#iframe {
 display: none;
 }
}
</style>

HTML: 

<div class="item white">
<div id="iframe">
<iframe  src="https://player.vimeo.com/video/279740359" 
 width="320" height="240" frameborder="0" allowfullscreen="" >Browser 
 not compatible.
</iframe>
</div>
<div id="video"> 
<a href="https://www.shopbentley.com/en/back-to-school.html"> 
<video  width="100%" height="100%" loop autoplay muted 
 preload="metadata"><source 
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" type="video/mp4" />      
 Your browser does not support the video tag. I suggest you upgrade 
 your browser.
</video> 
</a>

link to the working code http://jsfiddle.net/fe3vd2ts/12/

Upvotes: 0

Views: 4207

Answers (1)

CoreyUXD
CoreyUXD

Reputation: 11

I just needed to fix my selectors and containers :D

<style>
@media only screen and (max-width: 375px){

 .wrapper-with-intrinsic-ratio {
    position: relative;
    padding-bottom: 56.25%;
 }

.element-to-stretch iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

 }
 .video {
 display: none;  
 }
 }
 @media only screen and (min-width: 375px){
.video{display: block;}
.wrapper-with-intrinsic-ratio{display: none;}} 
</style>

HTML:

 <div class="item white">
 <div class="wrapper-with-intrinsic-ratio">
    <div class="element-to-stretch">
        <iframe  src="https://player.vimeo.com/video/279740359" width="100%" 
         height="100%" frameborder="0" allowfullscreen="" >Browser not 
         compatible.
        </iframe>
    </div>
</div>
<div class="video"> 
    <a href="https://www.shopbentley.com/en/back-to-school.html"> 
        <video  width="100%" height="100%" loop autoplay muted 
         preload="metadata"><source src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
 type="video/mp4"/>      

    Your browser does not support the video tag. I suggest you upgrade your 
     browser.
    </video> 
    </a>
    </div> 
</div>

Upvotes: 0

Related Questions