Как я могу получить встроенное видео Vine для динамического масштабирования на разных устройствах?

Question

Я пытаюсь вставить видео лозы в страницу WordPress и с трудом пытаюсь увеличить масштаб видео при просмотре на iPhone. Мне действительно не повезло, что я добавил что-то в код HTML для встраивания. Но это, вероятно, потому что я полный нуб.

Вот код, который я хотел бы иметь в динамическом масштабе.

<iframe class="vine-embed" src="https://vine.co/v/bVuUeLXBHBF/embed/simple" 
width="600" height="600" frameborder="0"></iframe><script async 
src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script> 

Answer 1

Я думаю, что вы забыли опубликовать код?

<iframe src="https://vine.co/v/bnrtW52x1uJ/card?mute=1"
width="100%" height="100%" frameborder="0"></iframe>

Если это код для встраивания виноградной лозы, можете ли вы просто изменить ширину / высоту на проценты, если в настоящее время используете пиксели?

Answer 2

Я просто искал сегодня ответ.. и это сработало для меня:

Стиль

.embed-container {
    position: relative; 
    padding-bottom: 100%; 
    height: 0; 
    overflow:  hidden;
} 
.embed-container iframe, 
.embed-container object, 
.embed-container embed {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

HTML

<div class='embed-container'>
    <iframe width='100%' src='https://vine.co/v/h9eAhKWzJlv/embed/simple' frameborder='0' scrolling='no' allowtransparency='true'></iframe>
    <script async src='//platform.vine.co/static/scripts/embed.js' charset='utf-8'></script>
</div>

Answer 3

Была такая же бешеная проблема, когда мой сайт нуждался в отзывчивости. Игра с атрибутами ширины и высоты и стилем ничего не сделали для меня. В итоге я написал функцию для вычисления ширины и высоты, которая мне нужна при загрузке страницы, а затем записал iframe во innerHTML содержащего элемента div:

function setVineDimensions () {
    var dimension = document.getElementById('vine_container').offsetWidth;
    document.getElementById('vine_container').innerHTML  = '<iframe class="vine-embed" src="https://vine.co/v/XXXXXXXX/embed/simple" width="' + dimension + '" height="' + dimension + '" frameborder="0"></iframe>';
}

setVineDimensions();

Обратите внимание, что выше это просто iframe. Когда вы получаете код для встраивания из Vine, есть и скрипт. Вставьте это в шапку, и все готово.

Это решение работает только при загрузке / обновлении страницы. Если вы склонны изменять размер окна браузера, оно не изменится.