responsive css about embed-js HOT 18 CLOSED

Can you post a screenshot ?

from embed-js.

from embed-js.

Vines stays to width..

from embed-js.

from embed-js.

For vine there is an option to set its width .
Writing the pdf/video css based on the device width is not great always because sometimes that is not taking the full device width and is wrapped inside a div of somewhat lesser width than the device's width. That will create problems for the user.

So better you write your own css based on the div width in which you are using the plugin and not the device width.

from embed-js.

You can always add your css over the default one according to your needs. If you have some solution that will be consistent in all cases then only it can be implemented in the plugin.

from embed-js.

Thnx. fixed it by getting the class width and parsing it true embed.js

var width = $('.forum').width();    
var $window = $(window);           

$window.resize(function resize(){
    var width = $('.forum').width();
});

For the pdf and youtube i will create custom css for phones.

from embed-js.

Can you send a PR ?

from embed-js.

What is a PR :P

from embed-js.

Its Pull Request. see this

from embed-js.

Never did it before. Ill read it as soon as !

from embed-js.

Though your solution will work but i will have to include this responsiveness code inside the plugin as on each resize your code will reload the whole content. This means repeated http requests. Thats never good. I will see what i can do.

from embed-js.

can you also set in your next release the hight of the iframe fore VINE + 2 pixels? 158 seems te be to short for the last borderline from Vine

opts.vineOptions.width + 160

from embed-js.

currently working on a iframe refresh after resize window, i added class="ejs-vine-iframe" on the iframe:

   var width = $('.element').width()-21;    
var $window = $(window);           

$('.ejs-vine-iframe').css({'width': width});        

$window.resize(function resize(){
    var width = $('.element').width()-21;
    $('.ejs-vine-iframe').css({
        'width': width,
        'height': width+160,
    });  
    $('.ejs-vine-iframe',window.parent.document).attr('src',$('.ejs-vine-iframe',window.parent.document).attr('src'));
});

from embed-js.

If default size is 500 for vine, and opening page with vine on smaller device the vine width is 500px.

resizing from large window to smaller works, vine shrinks too. but when resizing from very small to big window the vine does not resize bigger anymore,

maybey it's an solution to get the width of the element div and take a amount of pixels to lower the width. when resizing then always resize the vine box too.

from embed-js.

Actually here width that you set is maxWidth but i guess yours solution seems better .I will fix this

• When there is no width set it will take the width of whole div

from embed-js.

Now there are slight change in options

vineOptions:{
            maxWidth:500,
            type:'postcard',         //'postcard' or 'simple' embedding
            responsive:false         // whether to make the vine embed responsive
      },

I guess you can understand the function about how it works. If not do reply here. I am closing this issue now.

from embed-js.

thank you for this :)

from embed-js.