Menu

Need help wrapping text around embedded video in a Page

Hello, I am setting up a Page with five videos. I want to add descriptions of the videos to the left or right of each video.  However, the videos only load to the right margin and the text can only sit above or below the video.  Can I wrap text around the video and move the video around to different places on the Page?

Thank you.

Elizabeth


1 person has this question

Hi Elizabeth!


You can do this, although it requires a little savvy with HTML.


I'm going to do some digging into the best way to achieve this and get back to you ASAP. Are you looking to do this on your landing page or within the course itself?


Thanks,

Catherine

Thanks, Catherine.  I'm doing this only on a single Page from your pages section.  Thanks!

Elizabeth


Hi Elizabeth,


Sorry for the delay on this, but I found something that should work for you.


In this example, the text won't wrap around the video, but will look like the below:


image


I decided to show you this option, partly because having the text wrap adds another level of complexity, and partly because  I think this looks nicer :)


Step 1. The first step is to make sure that, when you add the videos, they will be responsive and not overlap with the text. To do that you need to add some CSS to your site:


On your dashboard, go to Themes > My Themes and select to Edit your current theme.


Paste this code into your Theme CSS and then go to File > Save.


.responsive-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 60px; overflow: hidden;
}


.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 

Here's an example:


image



Step 2. Once you've done that, go back to your Additional Page and paste the following into the HTML (<>) view, replacing the parts in caps with the video URL and the text.

 

<div class="row" style="padding-bottom: 20px">
	<div class="col-md-5" style="padding-bottom: 20px">
		<div class="responsive-video">
			<iframe src="VIDEO URL GOES HERE" frameborder="0" allowfullscreen="">
			</iframe>
		</div>
	</div>
	<div class="col-md-7">
		<p>
			TEXT GOES HERE
		</p>
	</div>
</div>

 

For multiple rows of text and video, just paste that same code in each time you need to use it.


Here's an example:


image


Let me know how you get on with that!


Thanks,

Catherine

Hi Catherine, 


Thanks for this. I did find this piece of code : <div style="float:left; margin-right:15px; margin-top:0px;"> that I placed in front of <iframe...video...</iframe></div>

That seems to work well and pushed the text to the left. 


However, it looked kind of blah, so I decided instead to use images of the text (made in Canva) , so for this page,I hope I can float the images next to the videos.



Login to post a comment