ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Недоступный iframe для воспроизведения видео. Google Chrome
2 сообщений из 2, страница 1 из 1
Недоступный iframe для воспроизведения видео. Google Chrome
    #39191590
mlc
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mlc
Участник
Привет, форумчане. Вопрос такой: есть див, предполагается сделать с ним некоторые трансформации, после чего показать youtube видео. В firefox отрабатывает нормально, а вот в Chrome после того, как появляется iframe видео становится недоступным для воспроизведения или нажатия на паузу. В чем проблема понять не могу.

Есть пример на jsfiddle https://jsfiddle.net/ekthvj9e/4/

HTML
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<div class="ev">
            <a href="#" class="clicked">click me</a>

        <!-- youtube iframe -->
        <div class="ap">
            <iframe width="100%" height="100%" frameborder="0" src="https://www.youtube.com/embed/loFtozxZG0s"></iframe>
        </div>
    </div>



CSS
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
a,
a:focus,
a:hover {  
    color: #fff;
}

.ev {
padding: 170px 0;
background: #000;
text-align: center;

-webkit-transition: all .5s;
   -moz-transition: all .5s;
     -o-transition: all .5s;
        transition: all .5s;

-webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;

-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
        backface-visibility: hidden;
}

.ap {
background: #000;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: -100%;

-webkit-transform-origin: 0% 100%;
   -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
     -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;

-webkit-transform: rotateX(90deg);
   -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
     -o-transform: rotateX(90deg);
        transform: rotateX(90deg);

-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
        backface-visibility: hidden;
}

.ev[data-loading] {
-webkit-transform-origin: 50% 100%;
   -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
     -o-transform-origin: 50% 100%;
        transform-origin: 50% 100%;

-webkit-transform: rotateX(-90deg) translateY(100%);
   -moz-transform: rotateX(-90deg) translateY(100%);
    -ms-transform: rotateX(-90deg) translateY(100%);
     -o-transform: rotateX(-90deg) translateY(100%);
        transform: rotateX(-90deg) translateY(100%); 
}



JS
Код: javascript
1.
2.
3.
4.
$('.clicked').click(function(e) {
  e.preventDefault();
  $('.ev').attr('data-loading', true);
});
...
Рейтинг: 0 / 0
14.03.2016, 17:11
| Ответить | Цитировать | Написать  
Недоступный iframe для воспроизведения видео. Google Chrome
    #39195366
mlc
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mlc
Участник
mlc,

up
...
Рейтинг: 0 / 0
18.03.2016, 13:57
| Ответить | Цитировать | Написать  
2 сообщений из 2, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Недоступный iframe для воспроизведения видео. Google Chrome
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]