[billy.rooneyParticipant]

Hi,

There seems to be some posts relating to this issue but taking several different approaches.

I am looking to integrate video into the design of posts, and would really like to know how to wrap text around video elements, either self hosted or embedded. But I would like to have the control over the size of the video (usually 1 column’s width in a three column structure).

What is best way of going about this? Do I add a text element, and try and bring the video into the text via a shortcode?

I would like the video to reisize on different in different screens, and have the text always wrap around it with a bit of padding.

I hope that makes sense and is a bit clear, here’s a link in cases that illustrates what I’m trying to do. I’m trying to achieve the same effect in Cornerstone, but the results are bad: http://inallfairness.ie/why-is-creating-something-new-scary/

Any advice on this issue and I would be hugely grateful!

[Rue NelModerator]

Hello There,

Thanks for writing in! To resolve your issue, perhaps these links could help you:
http://wpsites.net/wordpress-tips/wrap-text-image-embed-videos-wordpress/
https://premium.wpmudev.org/blog/wordpress-wrap-text-around-video/

Hope this helps.

[billy.rooneyParticipant]

Hi Guys,

Thanks for getting back to me, although I’m still having problems.

1: Can the video wrap procedure be implemented within Cornerstone? It would be good to have all the other design options of Cornerstone for the rest of the post.

2: The video just stretches the whole width of the page, thus rendering the attempt of wrapping the text around the video pointless. Is there a way to control the size of the video, or the div so that I can have it nestled within a paragraph of text, about a third or half of the width, and have the text wrap around it?

Thanks a million for you help!

[billy.rooneyParticipant]

Also, sorry to bug you, but is there a way to use it with the video embed or self hosted elements in Cornerstone, so I can make use of the autoplay, mute, hide controls, and loop functions?

[billy.rooneyParticipant]

Oh, and how to keep it in the 16:9 format

[RadModerator]

Hi there,

You can only control its size and wrapping if you add your video as a shortcode within the text or raw element. Adding it to section/columns as video element will not wrap since they are alone and separated in position. The text should be relative to the video for it to wrap.

Would you mind providing a mockup design of what you’re trying to achieve? And please provide the login credentials as your provided URL is behind the coming soon page.

Thanks!

[billy.rooneyParticipant]

This reply has been marked as private.

[billy.rooneyParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

Can you provide the specific post where you are trying to implement it?

Thanks

Joao

[JoaoModerator]

Hi There,

Can you provide the specific post where you are trying to implement it?

Thanks

Joao

[billy.rooneyParticipant]

Sure, it’s http://inallfairness.ie/homosexuality-survival-not-sex

Now for this post I’ve been separating the vids into columns, which I know is not the way to go, but the embedding the videos in the text field just makes videos go full width. I want to control the size of the embedded and self hosted videos so that they sit in a paragraph, quite small.

I haven’t published the other experiments, but I have sent you the screen captures of what it looks like when put the shortcode in amongst the text.

[billy.rooneyParticipant]

Sure, it’s http://inallfairness.ie/homosexuality-survival-not-sex

Now for this post I’ve been separating the vids into columns, which I know is not the way to go, but the embedding the videos in the text field just makes videos go full width. I want to control the size of the embedded and self hosted videos so that they sit in a paragraph, quite small.

I haven’t published the other experiments, but I have sent you the screen captures of what it looks like when put the shortcode in amongst the text. This is the post: http://inallfairness.ie/why-is-creating-something-new-scary-copy

[JadeModerator]

Hi Billy,

Thanks for the details.

We could try adding an inline CSS style in the style field of the video element to control it’s width and have the text wrap around it. For example for the embedded video on this page: http://inallfairness.ie/why-is-creating-something-new-scary-copy/, you can add this code in the element’s style field: float: left; width: 200px; margin-right: 20px;.

The result should be like this:

Hope this helps.

[billy.rooneyParticipant]

Hey Guys,

I really do appreciate your help with this issue, and I think we’re tantalisingly close to the solution. That style gives the wrap effect, which is what I’m looking for, so thank you.

For anyone else looking for this solution, if you then put mbn into the class field, it will remove the margin beneath the video embed and the text wraps nicely around the video.

One question to you good souls in Themeco, do you know is there any CSS I can put enter to allow the video to have a little bit of a margin beneath on mobile only, so the when the text goes under the video embed in mobile, there is a little bit of a gap under the video element?

Again, thank you so much for your help with this issue.

[billy.rooneyParticipant]

Sorry, mbs in the class sorts that out. Thank you guys, you’re heroes!

[Author]

Posts