Видеоролик в мобильном устройстве: отзывчивый

Я использую приведенный ниже код HTML на моей веб-странице:

Html

<iframe id="okplayer" style="position: fixed; left: -10%; top: -10%; overflow: hidden; z-index: -999; height: 120%; width: 120%; opacity: 1; display: none;" allowfullscreen="1" title="YouTube video player" src="https://www.youtube.com/embed/mJY4rHEtohM?autohide=1&amp;autoplay=0&amp;cc_load_policy=0&amp;controls=3&amp;enablejsapi=1&amp;fs=0&amp;modestbranding=1&amp;origin=http%3A%2F%2Fwww.panaramica.com&amp;iv_load_policy=3&amp;loop=1&amp;showinfo=0&amp;rel=0&amp;wmode=opaque&amp;hd=1&amp;widgetid=1" width="640" height="360" frameborder="0"></iframe>

Но видео не отображается на iPhone / iPad и мобильных устройствах Android.

PD: HTML относится к теме Wordpress, поэтому я предпочитаю не трогать его, если это возможно.

Благодаря!!

css,wordpress,html5,mobile,responsive,

0

Ответов: 1

0

Хорошо, я действительно не понимаю последние 2 предложения. Но вот какой код будет работать. Было бы также лучше, если бы вы вставляли видео, а не копировали видео ссылку из адресной строки, потому что ссылка для встраивания уже имеет все функции, необходимые для ширины и высоты видео.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>My first web page</title>
    <link rel="stylesheet" href="style.css">
    <div class="videoWrapper">
    <iframe width="560" height="349" src="https://www.youtube.com/embed/mJY4rHEtohM" frameborder="0" allowfullscreen></iframe>
</div>
</head>
</html>

CSS:

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* Use 75% for 4:3 videos */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Если вы просто собираетесь с видео, вам не понадобится другой код css с вашего конца, все, что вам нужно, это то, что у меня есть. Я пробовал это на своем iPad и моем телефоне Android, и он отлично работает.

CSS, WordPress, html5, мобильный, отзывчивый,
Похожие вопросы
Яндекс.Метрика