Настройте ширину% виджета Wordpress

Question

Мои виджеты боковой панели моего сайта выглядят отлично, когда я просматриваю www.aryaziai.com с моего рабочего стола. Тем не менее, Единственная проблема, с которой я сталкиваюсь, заключается в том, что когда я просматриваю свою мобильную версию своего сайта, боковая панель «Featured video» торчит из кадра и немного перекрывается черным фоном.

В конце дня я не хочу вручную изменять ширину/высоту видеоизображения, я просто хочу, чтобы ширина виджета «Featured video» автоматически изменялась до размера заголовка виджета (синий блок вещь) .. Его интересно, потому что размер видео youtube тот же, что и название виджета при просмотре на рабочем столе, но название виджета остается в идеальном размере на мобильном телефоне.

Любая 100% ширина коды, которые могут это исправить? Спасибо

Answer 1

Если я правильно понял, у вас возникла проблема с настройкой вашего видео на YouTube, даже если размер div, который вы его обертываете, правильно изменен. Если да, прочитайте Chris Coyier's article on resizing YouTube videos.

Вы можете сделать все это в JQuery (если вы используете его), вот код Криса:

$(function() { 

    // Find all YouTube videos 
    var $allVideos = $("iframe[src^='http://www.youtube.com']"), 

     // The element that is fluid width 
     $fluidEl = $("body"); 

    // Figure out and save aspect ratio for each video 
    $allVideos.each(function() { 

     $(this) 
      .data('aspectRatio', this.height/this.width) 

      // and remove the hard coded width/height 
      .removeAttr('height') 
      .removeAttr('width'); 

    }); 

    // When the window is resized 
    // (You'll probably want to debounce this) 
    $(window).resize(function() { 

     var newWidth = $fluidEl.width(); 

     // Resize all videos according to their own aspect ratio 
     $allVideos.each(function() { 

      var $el = $(this); 
      $el 
       .width(newWidth) 
       .height(newWidth * $el.data('aspectRatio')); 

     }); 

    // Kick off one resize to fix all videos on page load 
    }).resize(); 

});