Я сделал видео на своей странице отзывчивым, но теперь я не могу отцентрировать его

Хотя это можно взломать с помощью регулярного выражения (и мне нравится злоупотреблять регулярными выражениями так же, как и следующий парень), вы рано или поздно столкнетесь с проблемой обработки подстрок без более продвинутого синтаксического анализатора. Возможные способы попадания в проблему включают смешанные кавычки и экранированные кавычки.

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

function splitNotStrings(str){
  var parse=[], inString=false, escape=0, end=0

  for(var i=0, c; c=str[i]; i++){ // looping over the characters in str
    if(c==='\\'){ escape^=1; continue} // 1 when odd number of consecutive \
    if(c===','){
      if(!inString){
        parse.push(str.slice(end, i))
        end=i+1
      }
    }
    else if(splitNotStrings.quotes.indexOf(c)>-1 && !escape){
      if(c===inString) inString=false
      else if(!inString) inString=c
    }
    escape=0
  }
  // now we finished parsing, strings should be closed
  if(inString) throw SyntaxError('expected matching '+inString)
  if(end<i) parse.push(str.slice(end, i))
  return parse
}

splitNotStrings.quotes="'\"" // add other (symmetrical) quotes here
0
задан Oversought 14 March 2019 в 02:26
поделиться

3 ответа

Вы должны иметь возможность центрировать свой элемент видеооболочки, просто задав ему динамические поля:

<styles>
    #video {
        padding-bottom: 55%;
        position: relative;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
        margin-top: 50px;

        /*display item as block element */
        display: block;

        /* align left and right margins dynamically throwing you right in the middle */
        margin-left: auto;
        margin-right: auto

        /* width and/or max-width must tell us how big video wrapper can really be */
        width: 100%;
        max-width: 500px;
    }
</styles>

Если ваше видео по-прежнему не центрировано, то это означает, что его родительский элемент имеет неверную ширину .

0
ответ дан HelpNeeder 14 March 2019 в 02:26
поделиться
 #video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 60%;
}

Кому:

#video embed {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   width: 60%;
   height: 60%;
   margin: 0 auto;
}
0
ответ дан huan feng 14 March 2019 в 02:26
поделиться

Замените следующий код CSS

#video iframe,
#video object,
#video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 60%;
}

этим

#video iframe,
#video object,
#video embed {
  position: absolute;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 60%;
}
0
ответ дан Usman 14 March 2019 в 02:26
поделиться