This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: 

Cannot apply float to a div holding an embedded YouTube video

  • Creator
    Topic
  • #22124
    gregfields
    Participant

    I have embedded a YouTube video on a page using [embed][/embed]. I then wrapped the embed in a div with a class name “video-right”.

    When I add this rule:

    .video-right {
    	max-width:560px;
    }

    the video displays at 560px wide and is responsive as the browser window shrinks as expected.

    However when I add a float rule:

    .video-right {
    	float:right;
           max-width:560px;
    }

    the entire video just vanishes. How can I have text wrap around a video?

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #22132
    Jason Bobich
    Keymaster

    Hi,

    Can I see a link to where you’ve floated the video to the right, and it’s vanished? That way I can check it out in my inspector and see what’s going on with the specific scenario.

    #22134
    gregfields
    Participant

    http://drldabney.com/meet-dr-dabney/

    The video is the first item after the page title.

    #22136
    Jason Bobich
    Keymaster

    The video itself is going to fill its container. When you float something in CSS, that element now has no width. So you need to give it a width. You’re currently setting a max-width, but it has no initial width.

    For example, something like this might work better:

    @media (min-width: 992px) {
    	.video-right {
    		float: right;
    		width: 560px;
    	}
    }

    … That’s saying if the viewport is 992px or above (i.e. larger than tablets), then float the video to the right and make the width 560px.

    #22137
    gregfields
    Participant

    That works great. Thanks Jason!

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.