1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 How to float right youtube video on XF page

Discussion in 'Styling and Customization Questions' started by Andy.N, Nov 10, 2013.

  1. Andy.N

    Andy.N Well-Known Member

    I'm trying to float the video right on a XF page and it works somewhat but I'm curious to see if there is a better way so that the video appears below the text when in responsive mode. Right now, it's on the top of the text when you resize the window.

    Code:
    <div class="messageText ugc baseHtml">
    <div style="float: right; margin-left: 10px;"><iframe width="380" height="214" src="https://www.youtube.com/embed/qqfeUUjAIyQ" frameborder="0" allowfullscreen></iframe></div>
    <p>This is some text. I'm trying to float the video right on a XF page and it works somewhat but I'm curious to see if there is a better way so that the video appears below the text when in responsive mode. Right now, it's on the top of the text when you resize the window.</p>
    I tried to put the video code under the text or float the text but it doesn't work.
     
  2. Jeremy

    Jeremy XenForo Moderator Staff Member

    For one, responsive can only be designed when using classes, so that's your first issue to correct.
     
  3. Andy.N

    Andy.N Well-Known Member

    Not sure I can understand what you tried to say, Jeremy.
    My style is responsive and all element scales down correctly. I'm just trying to see if there is another way to use the div and float tag to show the video after the text instead of before it.
     
  4. Jeremy

    Jeremy XenForo Moderator Staff Member

    This code should be defined in a custom class and not inline:
    Code:
    float: right; margin-left: 10px;
    Or else it will be annoyingly difficult to define responsive properties.
     

Share This Page