Centering iFrames using visual editor

[prionkor]

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">
    <iframe>
        ...
    </iframe>
</p>

and so on..

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

[prionkor]

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.

[iseulde]

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

[prionkor]

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.

[atomicjack]

Could potentially be implemented, following the above comments.

More feedback on this should be given, though.

[prionkor]

Add alignment classes to iframe.

[prionkor]

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

Functionalities:

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.
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.

[prionkor]

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

[prionkor]

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?

[swissspidy]

Related/duplicate: #31688

[taskotr]

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.

[azaozz]

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.

[azaozz]

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.