hiding and displaying responsive code with #media query - css

Question

I'm trying to create a responsive code to get the best of both worlds from iframes and HTML 5 video with clickable links. In my set up I want to write an inline #media query to play only the Iframe when bigger than 375px and if smaller than 375px to play HTML video in the same div block item white
I'm getting stuck on how to display hidden and instead show <video>
and my boss is convinced this is the way he wants to do it :S
#media only screen and (min-width: 375px) {
div.video {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
}
div.video>iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="item white">
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/TIB3q68ZHYw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<div class="item white">
<a href="https://www.walmart.com">
<video width="100%" height="100%" loop autoplay muted preload="metadata"> .
<source src="https://player.vimeo.com/external/274117996.sd.mp4?
s=d8982e09554557a0a5db18f8c5d450252fbcddbc&profile_id=165"
type="video/mp4" />
Your browser does not support the video tag. I suggest you upgrade
your browser.
</video>
</a>
</div>

Answer 1

In css, (min-width:500px) means that anything above 500px will trigger the css below that. If you instead say (max-width:500px), that means anything below 499px will trigger the css under that. For example:
/* This will effect the class as long as the screen width is > 500px */
#media (min-width:500px) {
.myContent {
display:none;
}
}
/* This will effect the class as long as the screen width is < 500px */
#media (max-width:500px) {
.myContent {
display:block;
}
}
Does this help a little bit?

Answer 2

One approach is (as you've noted) to combine the elements under one containing div and hide/show the content respectively (although the containing div here is moot). So with each breakpoint being reached, the iframe will be hidden and the video shown (and vice versa).
I couldn't get your mp4 file to play, so I've substituted it with an example as this may have impacted your effort and those of other responders...
Simple CSS:
#media only screen and (min-width: 375px) {
#iframe {
position: absolute;
height: 0;
padding-bottom: 56.25%;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#video {
display: none;
}
}
#media only screen and (max-width: 375px) {
#video {
display: block;
}
#iframe {
display: none;
}
}
HTML:
<div class="item white">
<div id="iframe">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/TIB3q68ZHYw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div id="video">
<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>
</div>
</div>
You can find this code working in a fiddle here:
http://jsfiddle.net/zh2b0n1e/
You will need to adjust the CSS styling elements to suit your needs (padding, width, borders etc) and improve the HTML, but this method is a simple way of achieving your goal.