Opened 9 years ago
Closed 5 years ago
#32920 closed feature request (worksforme)
Centering iFrames using visual editor
Reported by: | prionkor | Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | normal | Version: | |
Component: | TinyMCE | Keywords: | |
Focuses: | Cc: |
Description
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.
Attachments (1)
Change History (14)
#1
@
9 years ago
#2
follow-up:
↓ 3
@
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
@
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.
#4
@
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.
#5
@
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.
Functionalities:
- Adds align classes to iframe.
- 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>
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.
This ticket was mentioned in Slack in #core by chriscct7. View the logs.
9 years ago
#8
@
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
@
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?
#11
@
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
@
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
@
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.
Another idea is to add classes
.alignleft
,.alignright
,.aligncenter
,.alignnone
classes to the iframe. That will use theme developers to add appropriate css for the alignment.