How to make YouTube videos the full width on mobile?

Design help Layout & Design
1

Hi,

I have a blog post template and use a RTE page to style everything. However, I can’t stylise my YouTube videos and customise how I want them to look on different screen sizes like a can with font size, padding etc.

On a mobile phone the video is too small and I would like it to be full width, however, I don’t want it to be full width on a desktop as it will look too big.

Any help is much appreciated. I have no design skills/training and only started a couple of weeks ago so the more basic the better!

Thanks so much.

Kate

2

Hi @Kate_McMahon and welcome, the best way to get help please follow forum guide rules that are pinned on top of each topic section and assign appropriate topic instead a general

If you have a question

  1. Share your project’s Read-Only link AND live site’s Published link
  • The read-only link is a special url generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the webflow.io subdomain where you can view the live site with custom code running. It is important to share this link, as custom code does not run in the Designer.
  1. Upload as many screen shots/screen cast videos as possible to help others help you faster
  2. Add a description of what you’re trying to achieve, and/or post a link to a working example of what you’re trying to achieve
  3. Reply to users by tagging using the @ sign followed by their forum username like this: @username

before you will create a new request feel free to use forum search input field to find possible solution as this forum is great source of already solved requests.

https://discourse.webflow.com/search?q=video%20full%20width

If any solved request found on forum will not help to solve your issue please describe what you have done so far optionally add links to solutions that you have tried etc.

3

Hi @Kate_McMahon

You need to insert the youtube embed inside of a div, then style that div so it takes the CSS. Only do this on the mobile device size and not desktop.

4

Thanks so much for replying, I wasn’t notified there was a reply so sorry for not replying sooner.

I am using a dynamic articles template page that pulls the blog content styling from the same rich text field, so I am not sure if what you have described will work but I can try.

I think I perhaps need custom code, do you agree? Do you know how I would do this? Thanks so much.

5

Hey,

Just wrap everything inside the Div, the put the iframe inside. All the other content will be inside the iframe.