#html #embed
#HTML #Внедрить
Вопрос:
Я встраиваю PDF-файл на свой сайт со следующим кодом:
<embed src="{link_to_my_pdf}"
type="application/pdf" width="100%" height="300" />
Он имеет высоту 300 пикселей. Если я нажму полноэкранную кнопку в окне PDF, она не будет отображаться в полноэкранном режиме. Он просто расширяется в окне размером 300 пикселей. Как мне перевести его в полноэкранный режим на все мое окно?
Комментарии:
1. Попробуйте это в вашем HTML:
<embed type="video/webm" src="https://www.w3schools.com/tags/movie.mp4" width="400" height="300">. Отображается ли он как полноэкранный? (Может отображаться, что W3Schools отказался подключаться )
Ответ №1:
Кнопка внутри окна pdf — это не полноэкранная кнопка, это кнопка «по размеру страницы», поэтому документ просто расширится, чтобы заполнить его родительский контейнер. Полноэкранная кнопка — F11, но если высота вашего средства просмотра PDF установлена на 300 пикселей, средство просмотра не заполнит весь экран после нажатия клавиши f11.
Потенциальным решением было бы открыть PDF-файл в отдельном окне вашего сайта с атрибутом target=»_blank» в теге a, чтобы PDF-файл можно было просматривать в полноэкранном режиме и заполнять весь экран.
Также имейте в виду, что embed является устаревшим тегом, я бы предложил использовать либо iframe, либо object, любой из следующих должен работать во всех современных браузерах:
iframe
<iframe src="some.pdf" style="min-height:100vh;width:100%" frameborder="0"></iframe>
объект
<object data="some.pdf" type="application/pdf" style="min-height:100vh;width:100%"></object>
Вот список устаревших тегов HTML для использования в будущем:
https://www.w3docs.com/learn-html/deprecated-html-tags.html
Ответ №2:
Вы можете добавить allowfullscreen атрибут iframe , чтобы вы могли нажать полноэкранную кнопку на панели инструментов проигрывателя HTML5, чтобы перейти в полноэкранный режим. Или вы можете использовать javascript, чтобы сделать это за вас. Код будет похож на этот:
<iframe allowfullscreen src="path/to/pdf" style="position:absolute; top:0; left:0; width:100%; height:100%; border: none; overflow: hidden;"></iframe>
Здесь позиция специально объявлена, чтобы файл полностью соответствовал окну. Измените атрибуты позиции по мере необходимости.