squidfunk / mkdocs-material

Documentation that simply works

Home Page:https://squidfunk.github.io/mkdocs-material/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

<video> doesn't work well on mobile devices

huangyinhaow opened this issue · comments


Contribution guidelines

I've found a bug and checked that ...

  • ... the problem doesn't occur with the mkdocs or readthedocs themes
  • ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
  • ... the documentation does not mention anything about my problem
  • ... there are no open or closed issues that are related to my problem


I inserted the following code:

<video controls>
      <source id="mp4" src="“ type="video/mp4">

Expected behaviour

On PC, the width of the video is the same as the paragraph


Actual behaviour

On mobile devices, all elements except "video" are scaled down.


Package versions

  • Python: 3.10
  • MkDocs: 1.3.0
  • Material: 8.3.6

System information

  • Operating system: Android
  • Browser: Edge 102

Example .md file:


But why, some say, the moon? 

Why choose this as our goal? 

And they may well ask why climb the highest mountain? 

Why, 35 years ago, fly the Atlantic? 

Why does Rice play Texas?

We choose to go to the moon. 

We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win, and the others, too.

<video controls>
      <source id="mp4" src="https://d1.xf-yun.cn/file/3hyhhyhhyh/%E4%BA%BA%E7%B1%BB%E7%99%BB%E6%9C%8850%E5%B9%B4%E3%80%90%E5%AD%97%E5%B9%95%E7%89%88%E3%80%91%E8%82%AF%E5%B0%BC%E8%BF%AA%E7%99%BB%E6%9C%88%E6%BC%94%E8%AE%B2%E2%80%9C%E6%88%91%E4%BB%AC%E9%80%89%E6%8B%A9%E7%99%BB%E6%9C%88+We+Choose+to+Go+to+the+Moon%E2%80%9D.mp4" type="video/mp4">

Thanks for reporting. Something like the following should probably be sufficient:

.md-typeset video {
  max-width: 100%;

Thanks! And I think it should be set by default. Hopefully it can be fixed in next version.

Yes, I'll integrate it as soon as I find the time...

Released as part of 8.3.8.

ezoic increase your site revenue