Воспроизведение видео HTML5 внутри рамки изображения iPhone

Question

Воспроизведение видео HTML5 внутри рамки изображения iPhone

0

Кто-то задал аналогичный вопрос (qaru.site/questions/3943006/...), и они получили базовый ответ без кода. Я последовал их советам и создал свой собственный код.

Я пытаюсь воспроизвести видео HTML5 внутри рамки изображения iPhone. Вот так:

Мое изображение 300 пикселей на 629 пикселей. Проблема в том, что я получаю вертикальную полосу прокрутки в Safari 6 (браузер, на который настроен таргетинг), хотя окно достаточно большое для просмотра. Полоса прокрутки также отображается в моем коде Fiddle.

Почему я получаю эту вертикальную полосу прокрутки?

Мой код выглядит следующим образом:

Скрипт: http://jsfiddle.net/rZYTn/

HTML

<div class="myVideo">
<video width="253" height="447" controls autoplay>
  <source src="videos/keyboard.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</div>

CSS

.myVideo {
    background-image: url(iphone.png);
    background-repeat:no-repeat;
    width: 300px;
    height: 629px;
    padding-top: 93px;
    padding-left: 25px;
    overflow:hidden;
}

Дополнительное пространство и полоса прокрутки на Fiddle:

user1822824 20 сен. 2013, в 08:42

Источник

Теги:

html

css

html5

css3

html5-video

1 ответ

Ещё вопросы

Sudharsun · Answer 1 · 2013-09-20T05-55-00.000Z

Дополнительное пространство связано с размером видео и размером div (ширина и высота)

фиксировать

.myVideo {
    background-image: url(iphone.png);
    background-repeat:no-repeat;
    width: 254px;
    height: 455px;
    padding-top: 10px;
    padding-left: 25px;
    overflow:hidden;
}

Это может также удалить полосу прокрутки.

на самом деле установка верхнего отступа 10px убрала полосу прокрутки
Вы получили это сейчас, надеюсь, что проблема решена