web-dev-qa-db-ja.com

CKeditor、埋め込みコンテンツ（iframeなど）、レスポンシブデザインを統合

レスポンシブウェブサイトにCKeditorと埋め込みコンテンツ（たとえば、youtube/issuuの場合）の使用をまとめたいと思います。

私はこれまでに持っています：

Mediaモジュール統合とMedia-Youtubeを備えたCKeditorは、メディアライブラリを介してYouTubeコンテンツを簡単に埋め込むことができます。ビデオをレスポンシブにすることは、fitvidsの魅力のように機能します。

主な質問：これらのコンポーネントを一般化するか、これを機能させる別のソリューションを見つけることに興味があります。使用したいすべての埋め込みタイプについて、fitvidsやmedia-youtubeに似たものを書く必要がありますか、それとも見落としている解決策はありますか？

他の提案は高く評価されます。今ちょっと困ってます…ありがとう！

編集：たとえば、youtube-clipsと同じ方法でissuu（ http://issuu.com/ ）要素を統合したい：エディターはメディアライブラリ内にリンクを追加して送信するだけですそれをフィールドに。現在、issuuは固定サイズの埋め込みのみを提供しているため、画面の幅に合わせて拡大縮小されません。

7wysiwygmediathemingnodes
1
Volker

FitVidsを使用すると、独自の カスタムベンダー を定義できます。すべてをポイントすることで、検索対象の範囲を広げることができます<iframe>要素：

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

または、 カスタムCKEditorスタイル を定義して、ユーザーが選択したレスポンシブ要素にクラスを適用できるようにすることもできます。

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

次に、そのクラスでFitVidsをポイントします。

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

CSSとメディアクエリを使用してYouTube動画を上書きできます。事実、YouTube、Vimeoなどのほとんどのビデオはすべてiframeで利用できます。過去のプロジェクトでは、クライアントが埋め込みフィールドをコピーして、好きな場所の任意のディメンションでckeditorフィールドに貼り付けることを許可しています。

しかし、画面の幅がモバイルに縮小されると、私のCSSが引き継ぎ、モバイルテンプレートに合わせてビデオのサイズを変更し、重なりを減らし、ビデオの高さに関する問題を修正します。

例えば。

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

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

}

それがあなたの意味ですか、それとも私は質問を理解していませんか？

1
Collins