Responsive embedded media

Rudi von Staden

Vote:

I am using the Twitter Bootstrap framework to get a responsive design for my site. What I am trying to do now, is have it work with embedded media also. I have tried using flex-video css, fitvids.js, fluidvids.js, and EmbedResponsively.com, but it always overflows its container:

Any suggestions to get responsive media working?

#86189

May 15, 2014 15:18

Rudi von Staden

Vote:

I was able to get it working using the CSS markup from Smashing Magazine's article. However, it requires that editors add a .video-container div around their video embeds. Is there some way to add this automatically?

#86200

May 15, 2014 16:31

Torjus Eidet

Vote:

Have you considered something like this?

http://world.episerver.com/Blogs/Jeff-Wallace/Dates/2013/3/YouTube-Block/

#86203

May 15, 2014 16:37

Rudi von Staden

Vote:

That could work Torjus, except that I'd like to be able to embed responsive videos in the main content as well as a block, and seems to only support YouTube (not Vimeo and friends). In the meantime, I've updated my css to use class .embed-container instead of .video-container. That way, I can require that editors paste the output from embedresponsively.com. The TinyMCE editor / EPiServer will strip most of the code, but it will leave the div with class .embed-container. Not ideal, but as a hack it might be sufficient for our needs.

#86208

May 15, 2014 16:51