1

I like to bring together the usage of CKeditor with embedded content (for expamle youtube / issuu) in a responsive website.

I have so far:

CKeditor with Media module integration and Media-Youtube to simply embed youtube-content via the media-library. Making the videos responsive works like a charm with fitvids.

Main question: i'm interested to either generalize these components or find another solution to make this work. Do i have to write something similar to fitvids and media-youtube for every embed-type i want to use or is there a solution out there that i overlooked?

Other suggestions highly appreciated. I'm kinda stumped at the moment... Thanks!

Edit: For example i'd like to integrate issuu (http://issuu.com/) elements in the same manner like youtube-clips: the editor just adds a link inside the media library and submits it to the field. Right now, issuu only offers embeds with fixed dimensions, so they don't scale according to screen width.

  • Maybe it would help if you gave us more of the puzzle: what happens to other media types without fitvid? What sort of other "embed-types" are you talking about? – Darvanen Mar 15 '15 at 22:39
  • I updated my question to clarify. With other embed-types i mean a generalized solution for such embedding problems. I don't know what fancy ideas of embedding content clients may have... ;) – Volker Mar 16 '15 at 10:58
1
+50

FitVids lets you define your own custom vendors. You could broaden the scope of what it looks for by pointing it all all <iframe> elements:

$("#thing-with-videos").fitVids({ customSelector: "iframe"});

Or, you could define a custom CKEditor style so users could apply a class to responsive elements of their choice:

{ name: 'Responsive Embed', element: ['iframe', 'embed', 'video', 'object'], attributes: { 'class': 'media-responsive' } }

And then point FitVids at that class:

$("#thing-with-videos").fitVids({ customSelector: ".media-responsive"});
1

You can override youtube videos using CSS and media queries. Infact, most videos from Youtube, Vimeo etc are all available in an iframe. In projects in the past, I allow clients to just copy and paste an embed field into a ckeditor field wherever they like, at any dimension they please.

But, once the screen width is reduced to mobile, my CSS takes over, and resizes the video to fit the mobile template, to reduce overlapping, and fix any issue with video height.

E.g.

@media only screen and (max-width: 767px) {

.field-name-body iframe     {width:100%;height:200px;}

}

Is that what you mean, or I have I not understood the question?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.