Jump to content

Formatting how video shows on page


tarsierspectral

Recommended Posts

Hi,

I'm very new to HTML5 so please excuse me if this is an elementary question  I'm using WordPress with custom built CMS.  I'm using API to add videos to my pages from another CMS.  The video player is provided via API as well.  The problem is that the video is always shown at one size (basically takes up the entire width of a page).  I was told I can use HTML5 at the page level to modify how the video is displayed.  I want to be able to show the video at smaller sizes, and for example maybe have text wrap around, just like you can do with images when writing an article.  But I want to make sure the video stays responsive so I don't want to just specify fixed size so it ends up being a wrong size if viewed on mobile device for example.

Can someone help me with this?

Thank you in advance,

Kathy

 

Link to comment
Share on other sites

It must have css classes such as used in bootstrap that defines 1/4, 1\2, 3\4 percentage widths? Use these for the container of video, then set video to be responsive to that parent container size. On smaller devices it should convert these container sizes to 100% width and the video will match.

Link to comment
Share on other sites

48 minutes ago, dsonesuk said:

It must have css classes such as used in bootstrap that defines 1/4, 1\2, 3\4 percentage widths? Use these for the container of video, then set video to be responsive to that parent container size. On smaller devices it should convert these container sizes to 100% width and the video will match.

Hmm, so it's not a matter of putting some HTML tag around the video?  That's what the developer told me that I could just do that, I guess he lied.  Unfortunately, I don't know anything about bootstrap, wouldn't even know where to look in WordPress for that.  Thank you for your help though.

Link to comment
Share on other sites

The container WILL be a HTML tag such as a div element, and most wordpress themes use bootstrap, you should see classes like col-xs-xx (extra small devices), col-sm-xx (small devices), col-md-xx (desktop), where 'xx' is a number of a 12 grid system, col-md-3 (1/4 width), col-md-4 (1/3), col-md-6 (1/2).and so on...

Link to comment
Share on other sites

2 minutes ago, dsonesuk said:

The container WILL be a HTML tag such as a div element, and most wordpress themes use bootstrap, you should see classes like col-xs-xx (extra small devices), col-sm-xx (small devices), col-md-xx (desktop), where 'xx' is a number of a 12 grid system, col-md-3 (1/4 width), col-md-4 (1/3), col-md-6 (1/2).and so on...

But if I don't have access to the theme bootstrap there is nothing I can do, right?  I just want to confirm that.

Link to comment
Share on other sites

Bootstrap is a framework of responsive css selectors/classes/id's in a external css file which wordpress would link to by default, all you do is add these class/es etc to the element, and it will do the rest. Go to https://www.w3schools.com/bootstrap/default.asp or bootstrap website itself to see how it works.

Of course this is if your wordpress theme IS! Using bootstrap, it could! Be another css responsive framework.

Link to comment
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...