Различное встраивание iframe или изображение в зависимости от размера экрана

Я знаю, что многие могут использовать для этого css, но я ищу, есть ли способ использования javascript на веб-странице, которая будет обслуживать другой iframe [например, ваше видео с другим размером] в зависимости от обнаруженной ширины разрешения экрана.

Также необходимо сделать то же самое с отображением изображений разного размера в зависимости от ширины экрана.

Попробовал это на тестовой странице, но все, что у меня получилось, это белый экран...

<тип сценария = "текст/javascript">

вар SW = screen.width;

если (sw <341) {

document.write('"frameborder="0"allowfullscreen>

');

}

еще

если (sw <481) {

document.write('"frameborder="0"allowfullscreen>');

еще

если (sw <641) {

document.write('"frameborder="0"allowfullscreen>');

еще {

document.write('"frameborder="0"allowfullscreen>');

}

Если ширина вашего видео будет одинаковой на всех страницах, все, что вам нужно сделать, это изменить ссылку на видео и оставить код одинаковым.

Если ширина будет меняться, то да, вам нужно будет изменить .initialWidth (как css, так и html). Если вы планируете в конечном итоге иметь сотни видеороликов, вам нужно будет рассмотреть возможность другой CMS.

Вы не можете просто вручную создать сотни страниц для размещения ваших видео. Подумайте о том, чтобы найти хороший, понятный адаптивный шаблон и разместить в нем свой контент.

Я бы так и сделал.

Также вам не обязательно иметь два отдельных сайта (десктопный/мобильный). Вам нужен ОДИН сайт, который будет адаптивным и гибким.

в зависимости от того, ГДЕ вы вызываете этот сценарий, он может перезаписать существующий документ.

Вообще говоря, именно поэтому следует избегать document.write - ну, и даже когда он работает, он вызывает «повторную обработку» документа, что может привести к увеличению времени загрузки страницы.

Поскольку все, что у вас есть, — это точки останова, и все эти iframe загружают один и тот же контент — в наши дни, если вы хотите создать адаптивный макет, это НЕ задача JavaScript!

Есть ДВА способа сделать это, первый — с помощью медиа-запросов:

HTML:

 


.responsiveFrame {


position:relative;


/*


We shouldn't have to declare a width on a DIV, but it fixes


IE positioning thanks to "haslayout" all the way back to IE


5.5, but it ALSO fixes a quirk that can happen in some layouts


in SOME versions of Firefox. Better safe than sorry!


*/


width:100%;


/*


padding bottom == desired frame aspect ratio.


Basically just height divided by width as percent


So 4:3 aspect would be 75%, 16:9 would be 56.25%,


5:4 would be 80%, etc, etc...


*/


padding-bottom:75%;


}


.responsiveFrame iframe {


position:absolute;


/*


We shouldn't have to say top or left here, but... well...


Some browsers have really crappy implementations of the spec


*/


top:0;


left:0;


width:100%;


height:100%;


}

Код (разметка): это то, что браузеры до CSS3 получают за размер.

Он же IE8/раньше.

НУ ЧТО Ж. Они до сих пор так хорошо снимают видео. ЗАТЕМ этот CSS выполняет тяжелую работу.

  <div class="responsiveFrame"> <iframe src="[URL='https://lumtu.com/yti/PAbbAPTBodHRwczovL3lvdXR1YmUuY29tL2VtYmVkL1Y5VE90RGprN1FzP3Jl3Pz']https://www.youtube.com/embed/V9TOtDjk7Qs?rel=0[/URL]" width="290" height="218" frameborder="0" allowfullscreen ></iframe> </div> 

Код (разметка): Или что-то в этом роде.

Этот метод приличный, но не очень.

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

HTML просто получает дополнительный DIV:

  @media (min-width:442px) { .responsiveFrame { width:400px; height:300px; } } @media (min-width:642px) { .responsiveFrame { width:600px; height:450px; } } @media (min-width:782px) { .responsiveFrame { width:740px; height:555px; } } 

Код (разметка): Приятная особенность CSS-элементов заключается в том, что объявления процентного заполнения основаны на ширине родительского элемента.

Если мы абсолютно позиционируем IFRAME внутри DIV, установив для него значение и высоту на 100%, мы можем дополнить DIV снизу на процентную высоту, что всегда будет поддерживать правильный размер IFRAME.

  <iframe src="[URL='https://lumtu.com/yti/PAbbAPTBodHRwczovL3lvdXR1YmUuY29tL2VtYmVkL1Y5VE90RGprN1FzP3Jl3Pz']https://www.youtube.com/embed/V9TOtDjk7Qs?rel=0[/URL]" width="290" height="218" frameborder="0" allowfullscreen class="responsiveFrame" ></iframe> 

Код (разметка): этот метод работает в большинстве браузеров, даже в старых.

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

Никаких скрипттардеров не нужно! Вероятно, будет работать как минимум до IE6.

В наши дни люди слишком быстро погружаются в JS. В 99,99% случаев, если это проблема с макетом, НЕ ИСПОЛЬЗУЙТЕ JAVASCRIPT в качестве ответа!

У вас есть поле: auto, тег CENTER вам не нужен. НЕТ этот имеет ЛЮБОЙ чертов бизнес на любом веб-сайте, написанном после 1997 года. Для нескольких соотношений сторон вам, возможно, придется просто создать классы для набора стандартных или прибегнуть к использованию атрибута стиля.

НОРМАЛЬНО я выступаю против любой практики как небрежного кода, но из каждого правила есть исключение.

Особенно, когда HTML и CSS часто будут мешать вам делать что-то, что ДОЛЖНО быть простым, но это не так.

На самом деле у этой страницы МНОГО проблем, таких как катастрофически «неразвертываемый в реальном мире» тип документа XHTML 1.2, ЗАПОЛНЕННЫЙ кодом HTML 3, бесконечные бессмысленные атрибуты стиля, встроенные в разметку, и отсутствие отделения представления от контента.

Это подробный список того, как не стоит писать код на веб-сайте за последние полтора десятилетия!

Для css я создал файл в корневом каталоге сайта...

  <center>


<div class="initialWidth">


<div class="responsiveFrame">


<iframe src="[URL='https://lumtu.com/yti/PAbbAPTBodHRwczovL3lvdXR1YmUuY29tL2VtYmVkL1Y5VE90RGprN1FzP3Jl3Pz']https://www.youtube.com/embed/V9TOtDjk7Qs?rel=0[/URL]" frameborder="0" allowfullscreen></iframe>


</div>


</div>


</center>

Код (CSS): И по этому URL
http://m.switchandoutletwiringmadeeasy.com/2011nec/

я кладу в разделе головы и это в теле...

 .initialWidth { max-width: 740px; } .responsiveFrame { position: relative; margin-right: auto; margin-left: auto; padding-bottom: 75%; // This is the aspect ratio height: 0; overflow: hidden; } .responsiveFrame iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

HTML: и, похоже, он отлично работает.

Должен вам сказать, что я создавал много веб-сайтов на HTML, но я новичок в CSS.

Я никогда не пользовался системами управления контентом и не был по-настоящему доволен результатами, поэтому придерживался HTML и даже отдельных мобильных версий с надлежащим распознаванием и кодированием мобильных устройств, чтобы Google не воспринимал это как дублирующийся контент.

Мой следующий вопрос: используя один и тот же файл CSS, как мне поступить с веб-страницами, имеющими несколько встраиваний с разными соотношениями сторон на каждой встраивании, и добавить изображения, которые также реагируют на размер, отображаемые на одной и той же веб-странице.

Спасибо

Я использовал что-то вроде: CSS

 


<div class="initialWidth">


<div class="responsiveFrame">


<iframe src="[URL='https://lumtu.com/yti/PAbbAPTBodHRwczovL3lvdXR1YmUuY29tL2VtYmVkL1Y5VE90RGprN1FzP3Jl3Pz']https://www.youtube.com/embed/V9TOtDjk7Qs?rel=0[/URL]" frameborder="0" allowfullscreen></iframe>


</div>


</div>

Код (разметка): html

  .initialWidth { max-width: 740px; } .responsiveFrame { position: relative; margin-right: auto; margin-left: auto; padding-bottom: 60%; // This is the aspect ratio height: 0; overflow: hidden; } .responsiveFrame iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } 

Код (разметка): Полностью гибкий.

Не нуждается в Скрытая информация :: Авторизуйтесь для просмотра »
. Вы можете начать его с любой начальной шириной, которую захотите.

Чтобы отрегулировать начальное изменение высоты: padding-bottom: 60%;

Это второй метод, который я опубликовал, только без сжатых свойств, комментариев, максимальной ширины в пикселях (бу, шипение), объявления высоты просто так, и не должно быть законных оснований говорить !important, поскольку CSS превосходит атрибуты HTML.

Кроме того, поскольку единственным дочерним элементом является APO, вам не нужно говорить о переполнении, а объявление высоты 0 также по большей части бессмысленно, поскольку в тот момент, когда iframe становится aPo, пробелы сворачиваются до нуля благодаря отсутствию CDATA без пробелов.

Но да, это почти одно и то же... хотя мне интересно, какое видео у вас будет с соотношением сторон 5:3... или это чрезмерная компенсация для контроллера YT, поскольку в не полноэкранном режиме элементы управления не работают перекрывать видео? (что может быть разумной идеей)

поэтому, чтобы иметь дело с разными соотношениями сторон, просто повторите один и тот же код в CSS и сделайте его .ResponseFrame2 тогда для дополнительных аспектов .ResponseFrame3 и так далее и то же самое в html это верно? Я не думаю, что мне придется повторять .initialWidth ? Я использую главную страницу в качестве редактора, который может создавать плохой код, возможно, мне следует использовать более современный редактор? Иногда я обнаруживаю, что при копировании и вставке попадает лишний ненужный код стиля. Для автоматического изменения размера изображений по ширине устройства, как это объявляется в css и html Мой первый веб-сайт был создан до 1999 года, и я придерживался того же метода, и я не особо иду в ногу со временем, и я думаю, мне нужно это сделать.