Need help? Check out our Support site, then


WordPress.com Forums » Support

Left-align YouTube video and have text at the side

  1. magicandmedicine1
    Member

    Hi there

    does anyone please know how I can left align my youtube video: http://thackraymagicandmedicine.wordpress.com/research/media/ and then have the text about it wrapping on the right hand side?

    Many thanks for your help

    The blog I need help with is thackraymagicandmedicine.wordpress.com.

  2. justpi
    Member

    If you mean make all the text wrap around, you need this coding in the Text editor:
    <div style="float:left;margin-right:20px;">[youtube=http://www.youtube.com/watch?v=aUaInS6HIGo&w=400]</div>
    Change the 20 to adjust the vertical space between video and text, change the 400 to adjust the video width.

  3. magicandmedicine1
    Member

    Thanks justpi,

    this is great as it has left aligned and there is text wrapping, however I just want it to wrap one paragraph of text and it keeps taking the next title "The Science of Seeing Inside Your Body'' and some of the following text and wrapping this too. Is there any way to avoid this? I tried adjusting the text in text and visual editors and tried moving the </div> tab but neither of these worked.

    Thanks again. Appreciate your help.

  4. magicandmedicine1
    Member

    Hi there, I have managed to sort it so that the next title doesn't join with the text wrapping around the video, but want to try and get the paragraph more centrally aligned to the video (rather than top aligned).
    I've been tinkering with this for a while.

    If anyone has any thoughts on this, please let me know.

    Many thanks.

  5. justpi
    Member

    You're welcome.
    I was careful to point out that this is the solution if you wanted to make all the text wrap around. If you only want one paragraph next to the video (you didn't mention this at first), change the opening div tag to this:
    <div style="float:left;margin-right:20px;margin-bottom:20px;">
    and enclose the second paragraph in this code:
    <p style="clear:both;">TEXT HERE</p>

  6. magicandmedicine1
    Member

    Hi justpi

    Many thanks for this and apologies for being vague in my first post.

    I'm almost there with this page now: http://thackraymagicandmedicine.wordpress.com/researchmedia/media/, I just want to try and right align and wrap onto two lines the title for the first paragraph - do you know how to do this please? I have tried this a few times by amending it in 'visual' editor but then the alignment of all the text and the youtube videos goes and I loose the div tag info in the text editor so I want to avoid this again if possible.

    Thanks again.

  7. justpi
    Member

    I work out accurate solutions to specific problems. But you changed the problem again: previous version was video, text block next to it, other text below it; new version is other video below the first video etc. So I'm not telling you anything before you assure me that you're done with all the content, and before you decide if the bold titles should be above or next to the videos.

    PS1 In my previous reply I forgot to mention that I deliberately omitted centering the text block in relation to the video. The theme has flexible width, so when the text blocks become narrower they will become longer, so centering them is wrong.

    PS2 Coding is a precise business: you don't discard pieces of it at will. The p tags work only as I showed - not without any enclosed text, not without the closing tag.

  8. magicandmedicine1
    Member

    Hi justpi

    I've managed to resolve the problem now. I'll try to think ahead a bit more in future about what is going to come next on my page and how this may affect the code before posting questions in the forum.

    PS1 Interesting what you say about centering and it makes sense - I spoke to someone who works in publishing who said that it is always best practice to hang text from the top (like a washing line).

    Thanks.

  9. justpi
    Member

    You're welcome. But:
    a) As I said above (PS2), p tags with no content or no closing tag are wrong, and they'll get stripped out if you switch the editor to Visual.
    b) Replying to another question of yours reminded me that you have the Custom Design upgrade. In that case it's better to avoid using inline CSS (= the style attribute) and use CSS editing instead.

    So here's a better solution. Use this in the Text editor:

    <table>
<tbody>
<tr>
<td id="videotd">
VIDEO SHORTCODE 1
</td>
<td>
TEXT 1
</td>
</tr>
<tr>
<td id="videotd">
VIDEO SHORTCODE 2
</td>
<td>
TEXT 2
</td>
</tr>
</tbody>
</table>

    and this in the CSS editor:

    .entry-content table {
font-size: 100%;
color: #444444;
border-bottom: none;
margin: 0;
}
.entry-content td {
vertical-align: top;
border-top: none;
}
#videotd {
width: 310px;
padding-right: 20px;
}

    Note: this solution assumes that you don't need differently styled tables on other pages. If you do, you/we'll need to modify things a bit.

  10. magicandmedicine1
    Member

    Thanks so much justpi, I've changed this now.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags