Make WordPress Core

Opened 9 years ago

Closed 5 years ago

#32920 closed feature request (worksforme)

Centering iFrames using visual editor

Reported by: prionkor's profile prionkor Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: TinyMCE Keywords:
Focuses: Cc:


When we need to put a video embed code into editor, we use the text editor put the video html then switch back to visual editor.

Visual editor does great job to resize video by dragging the placeholder which means to represent the video.

But when I select the placeholder and hit text align (left, right or center) the placeholder acts as if it is aligning itself accordingly (by adding .alignleft, .alignright, .aligncenter classes). If I hit save then preview the changes. No alignment happens.

So, either the iframe should be wrapped with a <p> tag with css text align. For example for center alignment of the video should create html like.

<p style="text-align:center">

and so on..

Or the alignment classes should not be added to make impression that video is actually aligning, it gives wrong visual feedback.

Attachments (1)

32920.patch (3.7 KB) - added by prionkor 9 years ago.
Add alignment classes to iframe.

Download all attachments as: .zip

Change History (14)

#1 @prionkor
9 years ago

Another idea is to add classes .alignleft, .alignright, .aligncenter, .alignnone classes to the iframe. That will allow theme developers to add appropriate css for the alignment.

Last edited 9 years ago by prionkor (previous) (diff)

#2 follow-up: @iseulde
9 years ago

  • Component changed from Editor to TinyMCE
  • Version 4.2.2 deleted

We can make it behave like an image. The only problem is that there will be no theme that supports it.

#3 in reply to: ↑ 2 @prionkor
9 years ago

Replying to iseulde:

We can make it behave like an image. The only problem is that there will be no theme that supports it.

Theme must have styles for editor default classes right? For example if a theme doesn't have any css defined for .alignleft, .alignright, .aligncenter, .alignnone non of image alignment will work. It could be same for the iframe too.

Most practical approach would be wrapping with <p style="text-align: center/left/right">...</p> on returned html. Just like any text block in the editor but iframe will act like block label element if we do that.

Last edited 9 years ago by prionkor (previous) (diff)

#4 @atomicjack
9 years ago

  • Keywords 2nd-opinion dev-feedback added

Could potentially be implemented, following the above comments.

More feedback on this should be given, though.

9 years ago

Add alignment classes to iframe.

#5 @prionkor
9 years ago

  • Keywords has-patch added

Adding align class is the most non destructive change we can make. I have created a patch. I am sure it can be improved.


  1. Adds align classes to iframe.
  2. When align is removed by clicking an active button editor alignnone class to images. In the case of iframe all align class is removed. Examples: <iframe class="alignleft"></iframe>, <iframe class="alignright"></iframe>
  3. findAlignClass function I have attached to editor. I am not much experienced with tinymce. IF the function can be moved to anywhere else please do so.
Last edited 9 years ago by prionkor (previous) (diff)

#6 @prionkor
9 years ago

  • Keywords needs-testing needs-unit-tests added; 2nd-opinion removed

This ticket was mentioned in Slack in #core by chriscct7. View the logs.

9 years ago

#8 @prionkor
9 years ago

Following #slack conversation if anyone can let me know what is the formatting issue. I would love to fix the patch.

#9 @prionkor
8 years ago

Now that we have the major release of WP done. Can you shed more light into this ticket and discuss what need to be done moving forward?

#10 @swissspidy
8 years ago

Related/duplicate: #31688

#11 @taskotr
7 years ago

It would be nice to add the same functionality as the images have: allowing the user to align the video either to the left or right or center. Also, resize the video via the Editor the same way as you can do it with the image.

#12 @azaozz
5 years ago

This works better in the block editor, in the Media & Text block. Still can (perhaps) be enhanced in the Video block (videos are non-resizable there).

Not sure it needs fixing in the classic editor though.

#13 @azaozz
5 years ago

  • Keywords dev-feedback has-patch needs-testing needs-unit-tests removed
  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed
  • Type changed from defect (bug) to feature request

Looking at this again, seems the TinyMCE media plugin is not used now when pasting a video embed code (that is an iframe) in the Text tab. Testing with few Vimeo videos, the iframes seem to work properly and are not replaced with a video placeholder as before, and cannot be resized by dragging in the Visual tab but the width/height can be entered on the Text tab.

Aligning these iframes works as expected. They are wrapped in <p style="text-align:center"> as mentioned in the ticket description.

Also there are several ways to add a video:

  • Add a video block in the block editor.
  • Add a media & text block.
  • Add one of the embed blocks for videos from a specific site (Youtube, Vimeo, etc.).
  • Paste the URL in the classic block and editor (if the host site supports oEmbed).
  • Use the media modal to insert a video shortcode for a locally hosted videos.

Closing as worksforme. Feel free to reopen if there is something we can fix here for the classic editor and block.

Note: See TracTickets for help on using tickets.