Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<video> doesn't work well on mobile devices #4053

Closed
5 tasks done
intzaaa opened this issue Jun 23, 2022 · 6 comments
Closed
5 tasks done

<video> doesn't work well on mobile devices #4053

intzaaa opened this issue Jun 23, 2022 · 6 comments
Labels
change request Issue requests a new feature or improvement resolved Issue is resolved, yet unreleased if open

Comments

@intzaaa
Copy link

intzaaa commented Jun 23, 2022

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

Description

I inserted the following code:

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

Expected behaviour

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

image

Actual behaviour

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

image

Package versions

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

System information

  • Operating system: Android
  • Browser: Edge 102
@intzaaa
Copy link
Author

intzaaa commented Jun 23, 2022

Example .md file:

# TEST

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">
</videos>

@squidfunk squidfunk added the change request Issue requests a new feature or improvement label Jun 23, 2022
@squidfunk
Copy link
Owner

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

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

@intzaaa
Copy link
Author

intzaaa commented Jun 23, 2022

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

@squidfunk
Copy link
Owner

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

@squidfunk
Copy link
Owner

Fixed in 5ed0489.

@squidfunk squidfunk added the resolved Issue is resolved, yet unreleased if open label Jun 24, 2022
@squidfunk
Copy link
Owner

Released as part of 8.3.8.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
change request Issue requests a new feature or improvement resolved Issue is resolved, yet unreleased if open
Projects
None yet
Development

No branches or pull requests

2 participants