responsive css

[ghost]

The display of PDF/Video is not nicely displayed on small devcies phones The PDF/Video becomes a box with sliders .

@media only screen and (min-width: 480px) and (max-width: 767px) { }
@media only screen and (max-width: 479px) { }

[ritz078]

Can you post a screenshot ?

[ghost]

[ghost]

Vines stays to width..

[ghost]

[ritz078]

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.

[ritz078]

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.

[ghost]

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.

[ritz078]

Can you send a PR ?

[ghost]

What is a PR :P

[ritz078]

Its Pull Request. see this

[ghost]

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

[ritz078]

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.

[ghost]

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

[ghost]

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'));
});

[ghost]

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.

[ritz078]

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

[ritz078]

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.

[ghost]

thank you for this :)