Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Недоступный iframe для воспроизведения видео. Google Chrome / 2 сообщений из 2, страница 1 из 1
14.03.2016, 17:11
    #39191590
mlc
mlc
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Недоступный iframe для воспроизведения видео. Google Chrome
Привет, форумчане. Вопрос такой: есть див, предполагается сделать с ним некоторые трансформации, после чего показать 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
| Ответить | Цитировать | Написать  
18.03.2016, 13:57
    #39195366
mlc
mlc
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Недоступный iframe для воспроизведения видео. Google Chrome
mlc,

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


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