Wysiwyg-editor: please add responsive for video

[open2]

currently inserted youtube video has fixed width/height.
please add responsiveness for it.

here is a stackoverflow tip.
http://stackoverflow.com/questions/25228056/responsive-iframe-using-bootstrap

[stefanneculai]

We won't mix the editor with Bootstrap because not everyone is using it. However, you could use the video.inserted event to do that.

[bonesoul]

I'm also up for this @stefanneculai , can we at lease get a sample usage example?

[stefanneculai]

The video.inserted event contains the video object. You should just set it's width. Unfortunately, we don't have a sample for it.

[bonesoul]

For future reference i'm adding this snipped here;

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="//www.youtube.com/embed/gcigfyCcPSM" allowfullscreen></iframe>
         </div>
    </div>
</div>

so i quickly tried a test

            $('#editor').on('froalaEditor.video.inserted', function (e, editor, $video) {
                  $video.html('test');
            });

and what i get is

<span class="fr-video fr-dvb" contenteditable="false">test</span>

@stefanneculai , we should be also able to get rid of that span with fr-video and fr-dvb class. any ideas?

[bonesoul]

done! :+1:

i managed it by myself;

            $('#editor').on('froalaEditor.video.inserted', function (e, editor, $video) {
                  var videoSource = $video.contents().get(0).src;
                  $video.html('<div class="row"><div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="' + videoSource +'" frameborder="0" allowfullscreen></iframe></div></div></div>');
            });

[ayush]

Also see http://fitvidsjs.com

[14falcons]

Simple css solution:

.fr-video{
overflow:hidden !important;
padding-bottom:56.25% !important;
position:relative !important;
height:0 !important;
}
.fr-video iframe{
left:0 !important;
top:0 !important;
height:100% !important;
width:100% !important;
position:absolute !important;
}