How can I make scaleable embedded video files in blog posts?
By Ben Carlin on Wednesday, 23 July 2014
Posted in Technical Issues
Likes 0
Views 403
Votes 0
When I embed a video into my blog posts in Easyblog it says I can change the dimensions but then when I change them it stays the same small size. It's just reverting back to some default option. So then I just took the iframe code from Vimeo and inserted it directly in. This worked as the content displayed at the right size. However, when the screen size is scaled down the iframe doesn't contract and then overlaps onto other modules.

Just wondering what the best solution around this would be?

Cheers

B
Hi Ben,

I already inspected your issue and I figured out that by using some CSS trick, we can make this video responsive.

I would love to try to implement this code to your site, but somehow there is no access given to experiment this.

First, please add below CSS code to your Joomla template's CSS file, place it at the bottom of your source code for your future reference:
.responsive-video {

	position: relative;

	padding-bottom: 56.25%;

	padding-top: 30px;

	height: 0;

	overflow: hidden;

}



.responsive-video iframe,  

.responsive-video object,  

.responsive-video embed {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

}

Then you need to edit again your blog post, and wrap the <iframe> with this <div> wrapper


<div class="responsive-video">

	<iframe src="//player.vimeo.com/video/100443606" width="500" height="281" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

</div>


Hope this will help, please let us know if you need my assistance to implement this, and also share your site access & FTP. Thank you
Yasser Ibrahim
·
Wednesday, 23 July 2014 11:50
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi there,

Thanks so much. Very impressed with how speedy you guys are at getting in touch

Here are my ftp and site details. If I could have a hand implementing it that would be great.

Thanks again for your time.

B
Ben Carlin
·
Wednesday, 23 July 2014 19:12
·
0 Likes
·
0 Votes
·
0 Comments
·
I did have a go at adding it to my JA Fixel Theme and then changing my easyblog entry with the div wrapper but it still doesn't seem to be working. I've probably done something slightly wrong :/
Ben Carlin
·
Wednesday, 23 July 2014 21:52
·
0 Likes
·
0 Votes
·
0 Comments
·
It worked. I just had to add the code to my blue theme as opposed the defualt ja fixel theme thanks so much!!!!
Ben Carlin
·
Thursday, 24 July 2014 01:57
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Ben,

I am sorry for the late reply.
You're welcome. Glad to hear your issue have been resolved.
If you have anymore question, please don't hesitate to ask us and please create a new ticket. I will mark this ticket as resolved.

Thanks again and have a wonderful day.
Yasser Ibrahim
·
Thursday, 24 July 2014 12:45
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post