Jump to content

Stop embedded <video> from breaking the width of mobile screens

Recommended Posts

Site URL: http://www.juanitamuller.com.au/georges-war

I cant get my embedded video from an external site to stay confined to the width of a screen on mobile. Just above the title "The Houses" I have the video which works fine on desktop but breaks on mobile. This is the current CSS I'm using for it:

.video-container {
  height: 50%;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  text-align: center;
}

And here's the original vid:

<div class='video-container'>
<video controls><source src="https://australiansatwarfilmarchive.unsw.edu.au/videos/874/Alick_Hodgson_1973_874_1.mp4#t=27" type="video/mp4"></video>
</div>

Any help would be much appreciated! 

Link to comment
  • Replies 1
  • Views 296
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.