CODEWITHSUNDEEP
htmlcssvideo
ExcellentSP
ExcellentSP

Reputation: 1619

How do I make a video responsively take as much space as it's cover image?

Here we have an image on top of a video, when they click the image, the video is set to display:block; and the image is set to display:none;which basically just switches the image for the video when clicked.

The image and the video are both set to width:100%; but even though they are the same width, the image is taller then the video. Lets say the image is 416px and the video has a height of 300px. How would I responsively make up for the missing video height so the rest of the relative elements on the page don't shift as it switches from image to video?

Here's the HTML:

<div>
    <div onclick="coverImage()">
        <img src="http://example.com/image" alt="overview-vid-1" id="wp-image-245" width="619" height="416" style="cursor:pointer;" class="alignnone size-full wp-image-245" />
    </div>
    <div id="thevideo" style="display:none">
        [youtube-shortcode-plugin vid=""/]
    </div>
</div>

Here is the Javascript that enables the switch (just in case):

<script stype="text/javascript">
    function coverImage(){
        theImg=document.getElementById('wp-image-245');theImg.style.display='none';
        thevid=document.getElementById('thevideo'); thevid.style.display='block';
    };
</script>

Upvotes: 0

Views: 195

Answers (1)

Scott Rowell
Scott Rowell

Reputation: 1130

Here you go: http://jsfiddle.net/9zc9aogL/3/

Your image size is an unusual ratio - youtube videos are usually 16:8 or whatever.. the image size you picked is a little more like 16:10.

Here's the CSS that makes your video responsive and the same size as your 16:10 image. Normally, to make a youtube video responsive without black bars on the top/bottom, I'd set padding-bottom:56.25%; but for this image size it's padding-bottom:62.25%

.wrap {
    position: relative;
    padding-bottom: 62.25%;
    padding-top: 25px;
    height: 0;
}

.wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
}

Upvotes: 2

Related Questions