TypeScript - переопределить стили iframe Youtube в угловых 4+ - PullRequest
0 голосов
/ 27 июня 2018

Можно ли переопределить стиль из встроенного iframe из youtube в машинописи с угловым 4+?

Я пытался переопределить класс CSS для встраивания iframe, но безуспешно.

Вот ссылка на таблицу стилей YouTube:

https://www.youtube.com/yts/cssbin/www-player-webp-vflFb1ac9.css

Класс, который я пытаюсь переопределить на моем сайте:

.ytp-cued-thumbnail-overlay-image{
  background-size: 100%; //instead for background-size: cover;
}

Причина, по которой я пытаюсь это сделать, заключается в том, что на мобильном экране размер наложенного изображения не изменяется должным образом.

**** Обновление ****: Например:

  1. Посетите этот сайт: https://www.wikihow.com/Embed-a-YouTube-Video-on-Your-Website
  2. Прокрутите вниз до видео на YouTube, которое они имеют в разделе Вопросы и ответы сообщества, щелкните правой кнопкой мыши / осмотрите элемент в любом месте за пределами видео.
  3. Нажмите на миниатюру видео, используя инструмент «Выбрать элемент со страницы» (верхний левый угол инструментов dev).
  4. Вы увидите, как содержимое тега iframe и тег div с классом " .ytp-cued-thumbnail-overlay-image " с background-size: cover; атрибут.
  5. Выберите мобильный просмотр (он находится рядом с элементом Выбрать элемент со страницы) или просто измените размер браузера, чтобы сделать его мобильным.
  6. В моем случае миниатюра не изменит размер свойства и не будет обрезана для обоих размеров, с мобильным представлением , и мое решение состояло в том, чтобы изменить " background-size: cover to 100%! Important;", но я могу сделать это только в инструментах разработчика браузера, но не в исходном коде с помощью CSS ( может быть не так в этом). Поэтому я поставил вопрос о другом способе сделать это с помощью TypeScript.

== РЕДАКТИРОВАТЬ ==: Я написал небольшой проект для этой проблемы, тег ссылки, кажется, добавлен в iframe, но это не оказало никакого влияния на него. Также проверьте область консоли тоже.

Ссылка на онлайн код:

https://stackblitz.com/edit/angular-kvmp33?file=src%2Fapp%2Fapp.component.ts

Я ценю все предложения и помощь. Я опубликую свое решение, если найду, и надеюсь, что это поможет любому с той же проблемой. Спасибо, ребята!

П.С .: Это мой первый пост, прошу прощения, если что-то пропустил или мой вопрос неясен.

Ответы [ 2 ]

0 голосов
/ 27 июня 2018

Никогда не проверял, но если весь контент находится в вашем DOM , вам просто нужно отредактировать его с помощью css, открыть инспектор Chrome (или любого браузера), и попытаться изменить нужные вам классы, если это работает, просто добавьте css с тегом ! важный , потому что, я думаю, youtube css будет последней импортированной в ваш DOM, поэтому он переопределит все, что вы используете, из-за этого вам следует попробовать ! важный

<iframe id="youtube_frame>
...
</iframe>

#youtube_frame .ytp-cued-thumbnail-overlay-image{
  background-size: 100% !important;
}

Obs .: Имейте в виду, что вы устанавливаете его как 100%, поэтому элемент верхнего уровня или любой другой выше должен иметь фиксированный размер ... попробуйте установить фиксированный размер фона как 400px, просто чтобы проверить, работает ли он

РЕДАКТИРОВАТЬ : Полагаю, вам следует подождать, пока DOM загрузит iframe, и только затем попытаться манипулировать элементом с помощью CSS, я только что протестировал этот код ниже, , но имейте в виду, что это грязный реализации, вы должны следить за iframe и проверять, загружен ли он, а когда он загружен полностью, вы добавляете свой класс

setTimeout(() => {
  let yt = document.getElementsByClassName('ytp-cued-thumbnail-overlay-image')[0];
  console.log(yt);
  yt.setAttribute("style", "background-size: 0");
}, 3000)
0 голосов
/ 27 июня 2018

Предполагается, что ваш код выглядит так:

<link href="./my.css" rel="stylesheet" />

...

<iframe src="..."></iframe>

Если вы определили класс, который вы упомянули в "my.css", он не сможет работать, так как iframe загружает другую страницу в текущей, поэтому загруженная страница использует только CSS, на который есть ссылки. Если вы хотите переопределить CSS загруженной страницы, вы должны вставить свой на страницу, загруженную iframe , как описано здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...