0

Estou implementando um plugin de vídeos do youtube, porém eu quero que esse plugin em determinada resolução mude um valor em sua declaração. Segue codigo de exemplo :

        $('#youmax').youmax({
        apiKey:'AIzaSyDEm5wGLsWi2G3WG40re-DAJcWioQSpJ6o',
        youTubeChannelURL:"https://www.youtube.com/channel/exemplo",
        youmaxDefaultTab:"Uploads",
        youmaxColumns:4, //Valores que quero mudar
        showVideoInLightbox:true,
        maxResults:4 //Valores que quero mudar


    });

Eu quero mudar esses valores "youmaxColumns" e "maxResults" ao chegar a largura om 600px, por exemplo, declarando outro valor, como 3 ou 2. No aguardo, e desde já agradeço pela atenção

2
  • Queres o width do container ou do ecrã?
    – Query
    24/03/2016 às 19:45
  • ecrã. Quero mudar a visualização do plugin ao chegar em telas menores 28/03/2016 às 19:26

2 Respostas 2

0

Uma maneira simples de resolve isso é assim:

function videoYoutube(el, novoValor1, novoValor2) {
   var dados = {
        apiKey:'AIzaSyDEm5wGLsWi2G3WG40re-DAJcWioQSpJ6o',
        youTubeChannelURL:"https://www.youtube.com/channel/exemplo",
        youmaxDefaultTab:"Uploads",
        youmaxColumns:4, //Valores que quero mudar
        showVideoInLightbox:true,
        maxResults:4 //Valores que quero mudar
    };

if (el.width() == 600) {
  dados.maxResults = novoValor1;
  dados.youmaxColumns = novoValor2; 
}
$(el).youmax(dados);
}

$(function() {
   videoYoutube('#youmax', 3, 2);
});
0

Vou-te dar um exemplo que utilizo muito quando quero colunas de boostrap alterem dinamicamente, eu crio uma função que me ajuda a chegar a este resultado

function BootstrapCalCss(size) {


  var colSize = Math.ceil(12 / (size || 1));

  var $windowSize = $(window).width();


  if ($windowSize >= 992) {
    return 'col-md-' + colSize;
  } else if ($windowSize >= 768) {
    return 'col-sm-' + colSize;
  } else if ($windowSize >= 1200) {
    return 'col-lg-' + colSize;
  } else {
    return 'col-xs-12';
  }


}


$(function() {
  $(window).resize(function() {
    $("#change").addClass(BootstrapCalCss(3));
    $("#change").text(BootstrapCalCss(3));
    
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<H1>RESIZE ME</H1>

<div id="change"></div>

Fiddle: https://jsfiddle.net/Badzpeed/pnntr8c3/1/

Codepen: http://codepen.io/anon/pen/PNmvqJ

Este script retorna-te colunas boostrap, mas caso querias um numero int poderás retornar apenas o colSize

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .