Joomla Templates Club 406,261 posts

[vertigoflow Friend vertigoflowJoin date: September 2015Posts: 5Downloads:3Uploads:0]

#721360

How to insert a video in an article for mobiles responsive manner?

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#721366

Hi

You can use a css class for this purpose

Try to take a look HERE

You can add this to your custom.css file

.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

and embed video into your article with the code below

<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#753701

Hi

You can use a css class for this purpose

Try to take a look HERE

You can add this to your custom.css file

.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

and embed video into your article with the code below

<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

[vertigoflow Friend vertigoflowJoin date: September 2015Posts: 5Downloads:3Uploads:0]

#721527

Sorry I do not work I do not know what I’m doing wrong

[vertigoflow Friend vertigoflowJoin date: September 2015Posts: 5Downloads:3Uploads:0]

#753778

Sorry I do not work I do not know what I’m doing wrong

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#721548

<em>@vertigoflow 500863 wrote:</em><blockquote>Sorry I do not work I do not know what I’m doing wrong</blockquote>

Hi

I used the suggested code in this article ” Video Nacional: Nunca te dir? Adi?s – Boomper” and as you can see it is working fine.

you didn’t added video into the <div class=”videoWrapper”>

Please check again

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#753795

<em>@vertigoflow 500863 wrote:</em><blockquote>Sorry I do not work I do not know what I’m doing wrong</blockquote>

Hi

I used the suggested code in this article ” Video Nacional: Nunca te dir? Adi?s – Boomper” and as you can see it is working fine.

you didn’t added video into the <div class=”videoWrapper”>

Please check again

[vertigoflow Friend vertigoflowJoin date: September 2015Posts: 5Downloads:3Uploads:0]

#722526

Thanks, I found my mistake.

I placed: https: //

and he was right: htpp: //

thousand thanks

[vertigoflow Friend vertigoflowJoin date: September 2015Posts: 5Downloads:3Uploads:0]

#753908

Thanks, I found my mistake.

I placed: https: //

and he was right: htpp: //

thousand thanks

[Author]

Posts