When embedding a video, you might notice the width defaults to 560 pixels wide. This can be problematic if you resize the screen or view the page on a mobile device; the video will not resize and the user will see a horizontal scroll bar on mobile devices. If you want your video to be responsive (mobile friendly) and span the full width of your content area, follow these steps:
- Open the page editor by clicking Edit and open the content row where the video is located.
- Select the video by clicking on it. A blue line will highlight the border of the video container when it's selected.
- Take note of the tiny 'tag notation' bar at the bottom of the WYSIWYG editor. This tells you where you are in the source code. In this example our video (iframe) is inside a paragraph (p) tag.
- Click on the 'p' element in the tag notation bar (sometimes it will say 'span')
- Go to Format > Formats > Blocks and select 'Div'.
- Notice the tag notation bar will now show 'div' instead of 'p'. If it doesn't, go back to step 4.
- Go to Format > Formats > Custom and select 'full-width-video'. This sets a custom class to our 'div' element so our video iframe will resize.
- It won't look like anything happened quite yet... click Preview Draft to see if it worked!
- Your video should now be resized to the full width of the content row.
- If it didn't change, go back to the editor, select the video, click 'div' in the notation bar and try step 7 again.
- If you resize your window, you'll notice the video is now fluid, maintaining 100% width no matter what size the user's screen is. Woohoo!
- Submit your changes
- Publish
Before:
After: