-1

How can I achieve something like this http://themenectar.com/demo/salient-agency/ ?

Basically it is a responsive video that fit whole dimension of the screen. I tried but without success, my problem is that the video doesn't fit the whole screen size (like the reference website)

I saw that site and I think I have to use javascript to give the dimensions

this is my test on codepen http://codepen.io/mp1985/pen/YyawvO

jQuery(document).ready(function($) {
      function setHeight() {
        windowHeight = $(window).innerHeight();
        windowWidth = $(window).innerWidth();

        $('.video-wrap, video').css('height', windowHeight);
        $('.video-wrap, video').css('width', windowWidth);

      }

      setHeight();

      $(window).resize(function() {
        setHeight();
      });
    });

Many thanks

mattia
  • 591
  • 2
  • 7
  • 22
  • You just want video not that flip effect? – Nenad Vracar Oct 24 '15 at 22:46
  • You have to crop the video, or in other words keep the ratio of the video, and fit the width/height missing the most, and let the rest overflow the screen, like this -> **http://jsfiddle.net/v9nwmqr3/** – adeneo Oct 24 '15 at 22:48
  • @NenadVracar I don't want the flip effect, I would like to have that video responsive and adapt to the screen size. – mattia Oct 24 '15 at 22:58
  • thanks @adeneo, have you seen the website? it seems that the video is more responsive, your code seems that crop the video – mattia Oct 24 '15 at 22:58
  • I've seen the website, and it does crop the video, that's the only way to keep the ratio and make it overflow that way. – adeneo Oct 24 '15 at 23:11
  • Possible duplicate of [Maintain aspect ratio of div but fill screen width and height in CSS?](http://stackoverflow.com/questions/20590239/maintain-aspect-ratio-of-div-but-fill-screen-width-and-height-in-css) – Giacomo Paita Jan 23 '17 at 16:56

1 Answers1

0

You can use one of this plugins

http://dfcb.github.io/BigVideo.js/

http://vodkabears.github.io/vide/

https://github.com/matthojo/videojs-Background

If you don't have previous experience working with plugins just remember to include jquery script before plugin script

Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176