Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Jeremy Frimond
Jeremy Frimond
14,470 Points

Can srcset be used with video elements too?

I have just watched the responsive video series and was wondering if all from that video could be applied to video tags?

For example, could the following code: 

      <img
          sizes="50vw,
                  (min-width: 1024px) 512px"        
          srcset="img/banner-large.jpg 2048w,
                  img/banner-medium.jpg 1400w
                  img/banner-small.jpg 800w"
        src="img/banner-medium.jpg"
        alt="Photograph of stuffand things"
        class="banner-image"
       />

be used for a video tag instead of an img tag?

1 Answer

jordans
jordans
1,609 Points

No, srcset doesn't work with a video tag. If you want to make your video responsive, embed a HTML5 video player and use JavaScript or "Emiliano Quintana " tags. In my opinion, JavaScript is much easier. Below is an example of what your project should look like.

Codepen for @media

Codepen for JavaScript

<div class="wrap">
        <video controls="" id='video-player' preload='metadata'>
        <source src="http://video-js.zencoder.com/oceans-clip.mp4" type=
        "video/mp4">
        <source src="http://video-js.zencoder.com/oceans-clip.webm" type=
        "video/webm">
        <source src="http://video-js.zencoder.com/oceans-clip.ogv" type=
        "video/ogg"></video>
</div>

.wrap {
    margin:50px
}

video {
    width:100%
}

$(document).ready(function() {
    var video = $("#video-player");
    var windowObj = $(window);

    function onResizeWindow() {
        resizeVideo(video[0]);
    }

    function onLoadMetaData(e) {
        resizeVideo(e.target);
    }

    function resizeVideo(videoObject) {
        var percentWidth = videoObject.clientWidth * 100 /
            videoObject.videoWidth;
        var videoHeight = videoObject.videoHeight * percentWidth /
            100;
        video.height(videoHeight);
    }
    video.on("loadedmetadata", onLoadMetaData);
    windowObj.resize(onResizeWindow);
});