Troubles embedding video.js responsive in adobe muse

[absalone]

Hi there,

I'm having some troublemaking video.js responsive in adobe muse. For now, I succeeded to embed video.js in muse, but it only works with fixed width. (I'm using Adobe muse 2015.1.1.21 ; and Safari)

Here is how I proceeded:

HTML code in the header (in muse the code is located in Page> property of the page > metadata < html code for header ***I'm using a french version so I translated the pathway myself)

<link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet"> <script `src="//vjs.zencdn.net/5.8/video.min.js"></script>

Then, the HTML code for the video is that one (Object > insert HTML code):

<video id="myvideo" class="video-js" controls preload="none" width="550" height="350" poster="http://cezanne01.businesscatalyst.com/assets/sequence01img.png" data-setup="{}"> <source src="http://cezanne01.businesscatalyst.com/assets/sequence01.mp4" type="video/mp4"> <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"> <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> <track kind="captions" src="../shared/example-captions.vtt" srclang="en" label="English"></track> <!-- Tracks need an ending tag thanks to IE9 --> <track kind="subtitles" src="../shared/example-captions.vtt" srclang="en" label="English"></track> <!-- Tracks need an ending tag thanks to IE9 --> <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> </video>

As you see, I'm using fixed with in the video setting (width="550" height="350"). I've tried making it responsive (by following this thread https://coolestguidesontheplanet.com/videodrome/videojs/)

So in the HTML code for the video I've added a div wrapper <div class="wrapper"> <div class="video content"> <video id="myvideo" class="video-js"..........</video> </div> </div> And I've also put height and width to auto (width="auto" height="auto")

Last thing, I added a code in the header (Page> property of the page > metadata < html code for header)

<link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet"> <script src="//vjs.zencdn.net/5.8/video.min.js"></script> <style> .video-js {padding-top: 56.25%} .vjs-fullscreen {padding-top: 0px} </style>

But it doesn't work, the video is very wide with this setting, and it isn't responsive. Do you have any suggestion?

Thanks! Matt

[gkatsev]

If you're using videojs 5, the only thing you need to make it responsive is set the fluid option to true (or add vjs-fluid class to the video element). There's no need to extra wrappers or what not.

[absalone]

Thanks !!!

[hakanozkaptan]

Thanks