[SOLVED] Responsive embedded Vimeo video in a card

Hello,

I am embedding Vimeo videos in a card. However they don’t seem to be responsive and “flows out” off the card boundaries.

<div class="page-content">
	<div class="card card-outline">
		<div class="card-header">Features</div>
		<div class="card-content card-content-padding">
			<iframe src="https://player.vimeo.com/video/1" width="640" height="361" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/1">Features Vedio</a> from <a href="https://vimeo.com/user1">John</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
		</div>
	</div>
	<div class="card card-outline">
		<div class="card-header">Activity</div>
		<div class="card-content card-content-padding">
			<iframe src="https://player.vimeo.com/video/2" width="640" height="357" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/1">Activity Vedio</a> from <a href="https://vimeo.com/user2">John</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
		</div>
	</div>
</div>

Any ideas on how to achieve “responsiveness” ?

I have discovered I can change the embedding options on Vimeo to achieve the responsive effect

1 Like