Embed a video into Docusaurus that occupies 100% of the width
I'm building a website by V2 Docusaurus.
I want to embed a youtube video into the page. I want the width of the frame to be 100% of the page. I tried a lot of solutions, but have not found the perfect one. At the moment, i'm using the following code:
<iframe width="675" height="380" src="https://www.youtube.com/embed/_AQXQDjw7Y8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
It works well in desktop, but i realize that it does not work well in phone:
Does anyone have any idea?
Solution
Not a Docusaurus-specific issue.
<iframe width="675" ... />
You're hardcoding a width value which is larger than most mobile device widths, so that's expected. See how the Flux docs does it in https://github.com/facebook/flux/blob/master/docs/In-Depth-Overview.md.
- Trying to make a clickable navigation bar which can be clicked to close
- How to use background with linear gradient in Tailwind css
- Anchor links to start below the header which is fixed at the top
- Keep footer at bottom of page when page height dynamically changes using CSS
- What does the media="" attribute in the stylesheet HTML definition refer to?
- HTML CSS Fit image in fixed size
- Angular viewChild native scrollable CSS window layout quirks
- Detecting if an <option> has been selected in <select> using CSS
- Applying border-radius to bootstrap 5 table
- How to increase space between dotted border dots
- use multiple css filters at the same time?
- How exactly does link rel="preload" work?
- Difficulty implementing accordion effect in Angular project
- How to center Font Awesome icons horizontally?
- How to set div's height in css and html
- How to forward scrollbar from to column in css grid
- What's wrong with this ternary operator?
- How can i replicate this corner-border-radius trick to an image in my project
- Not able to display material ui snackbar in center
- different grid area while using grid-template-column
- Why does z-index not work?
- How do I make the background image start at the top of the page and not below my sticky header?
- How can I make a color wheel using CSS (with white at center and fading to black at the rim)?
- Logic to add vertical stepper lines
- Why isn't my CSS animation-timeline: view() working?
- Why the elapsedTime property of animation event is undefined
- htmx: Selecting multiple classes in hx-trigger
- How do I move a slide with a mouse and on my phone?
- Is it possible to start the border-bottom after x amount of pixels?
- Angular Material icons not showing