The HTML5 video player is actually built into the WordPress core, so you don’t have to add support for it to your theme. The syntax for embedding video using the new player is pretty simple:
[video src="http://example.com/location/of/your/video.mp4"][/video]
Replace the value of src with the URL to your HTML5-compatible video file. This code is automatically generated when you upload a file using the Media Uploader and choose to embed the video.
If your existing video solution uses the [video] short tag with the same syntax, the native player should work without any modifications.
Ahhh…
Now I see the issue. We host most of our videos on YouTube, and this player doesn’t work with external videos apparently (at least not YouTube).
So, now my problem is.. I can do YouTube embeds myself, but my non-admins cannot (using the strait YouTube built-in links without an embed wrapper breaks our theme, would need to edit theme for those to work).
So, how to let my non-admins use embed? guess that’s a different help post.
What’s the site, and what happens when you put the YouTube URL in the post to use oEmbed?
The problem was that the YouTube video was breaking the margins of the content area in our theme.
I found two solutions though..
The best seems to be the CSS fix:
iframe, object, embed, oembed { max-width: 100%; }
Which keeps the video constrained to the actual content area, instead of expanding to the width of the containing div.
The other solution was to set the content_width with:
if ( ! isset( $content_width ) ) $content_width = 460;
But this is less effective for us, since the theme has narrow and wide versions of page and post content areas.
I do have one question still..
Assuming you do an oembed, how would you wrap text around an oembed object?
Adding any styles or other containing elements appears to break it, so the only way would be to add a display:block; and a float to the CSS above, but then you have no control over it.
Definitely go with the first solution. It’s the recommended way to handle keeping objects within their containing element, and handles everything via stylesheets.
Can you provide a link to a page where this is happening?
It’s an internal site, but what we have is two different content widths, so in an ideal situation, the oembed would match the column width on the narrower width, and have a text wrap, if desired, on the wider column.
Of course I could force a style for the wider pages, but that doesn’t allow for sometimes wanting a text wrap, and sometimes not.
Not being able to add any wrapper on an oembed creates some challenges…
Gaaah.. foiled again!
The oembed technique only is working for superadmins, not for normal admins or editors (multisite 3.6 setup).
dang.
Ok, running up against the visual editor stripping code. There is no solution for that, right?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Which thread do you want to continue this discussion on regarding the visual editor stripping code?
