Public Forums 71,145 posts

[bobptz Friend bobptzJoin date: November 2016Posts: 178Downloads:8Uploads:19 Thanks: 1 Thanked: 1 times in 1 posts]

#997918

I have placed videos (from youtube) on the webpage and I see border lines above and bellow, that I cannot remove.

I used you code from the demo to place a header with a video:

<p>&nbsp;</p>
<div class="jumbotron jumbotron-primary masthead btn-action">
<div class="col-md-6" align="left">
<p>The best free Joomla template that you ever need.</p>
</div>
<div class="col-md-6">video 1:
<div class="video-wrapper"><iframe width="560" height="315" frameborder="0" src="//www.youtube.com/embed/KSK2OR9pEUY?modestbranding=1&amp;;showinfo=0&amp;;autohide=1&amp;;rel=0&amp;;hd=1" allowfullscreen="allowfullscreen"></iframe></div>
</div>
</div>
<p>&nbsp;</p>
<p>xxxxxxxxxxxx</p>
<p>&nbsp;</p>
<div>
<div class="col-md-6" align="left">
<p>The best free Joomla template that you ever need.</p>
</div>
<div class="col-md-6">video 2:
<div class="video-wrapper"><iframe width="560" height="315" frameborder="0" src="//www.youtube.com/embed/KSK2OR9pEUY?modestbranding=1&amp;;showinfo=0&amp;;autohide=1&amp;;rel=0&amp;;hd=1" allowfullscreen="allowfullscreen"></iframe></div>
</div>

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#998019

Hi
This is not from the template, its in the video when u resize the youtube video there is black film under top and bottom.
Here you can see this: http://prntscr.com/dp4uxj
You can set the height auto if you want to make the height auto and it remove the line .

[bobptz Friend bobptzJoin date: November 2016Posts: 178Downloads:8Uploads:19 Thanks: 1 Thanked: 1 times in 1 posts]

#998162

Hello

I did follow your advice and changed height to AUTO.

Somehow nothing changes. Actually even if I make height to 100, still nothing changes. The problem remains.

see code :

    <p>&nbsp;</p>
    <div class="jumbotron jumbotron-primary masthead btn-action">
    <div class="col-md-6" align="left">
    <p>The best free Joomla template that you ever need.</p>
    </div>
    <div class="col-md-6">video 1:
    <div class="video-wrapper"><iframe width="560" height="auto" frameborder="0" src="//www.youtube.com/embed/KSK2OR9pEUY?modestbranding=1&amp;;showinfo=0&amp;;autohide=1&amp;;rel=0&amp;;hd=1" allowfullscreen="allowfullscreen"></iframe></div>
    </div>
    </div>

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#998329

Hi
Add below code in custom.css file

.video-wrapper iframe {
    height: auto!important;
}

Hope it helps.

[bobptz Friend bobptzJoin date: November 2016Posts: 178Downloads:8Uploads:19 Thanks: 1 Thanked: 1 times in 1 posts]

#998649

Hello

This did not help.

I did place this code in the …/templates/purity_iii/css/custom.css file.

What happened is this: All my video files, regardless of width, changed the height to 150 px. I could not trace the css code where this originated, as youtube code was involved.

I had to remove the code and clear the cache.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#998810

Hi
By default, the height was set to 100% so if you will add any width it will resize the video with respect to the width if iframe.
Height if the video is 150 because it does not resize the height value. The black border is not from the template or from CSS it by the video when it raised it has to maintain its aspect ratio.

[bobptz Friend bobptzJoin date: November 2016Posts: 178Downloads:8Uploads:19 Thanks: 1 Thanked: 1 times in 1 posts]

#998897

Pankaj Sharma wrote:

By default, the height was set to 100% so if you will add any width it will resize the video with respect to the width if iframe.

I will not place a value to width, so I will leave it at the default 100%. No problem with this.

Pankaj Sharma wrote:

Height if the video is 150 because it does not resize the height value.

I am sorry, I do not follow you. I placed the code as you told me:

    .video-wrapper iframe {
        height: auto!important;
    }

I do not see why the above code is unable to resize the height and why it becomes 150px.

Pankaj Sharma wrote:

The black border is not from the template or from CSS it by the video when it raised it has to maintain its aspect ratio.

I never said that the template places the black border. I believe it is from the incorrect width/height values. And I want to control the width/height value, which is placed by the template.

Furthermore I seem completely unable to control the WIDTH of the video.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#998917

Hi
The black film is not from the css its from the youtube video . When u set width and height video resize and show it like in your site. Its something u can not control since you are not using video in full container.
Hope its clear now.

[bobptz Friend bobptzJoin date: November 2016Posts: 178Downloads:8Uploads:19 Thanks: 1 Thanked: 1 times in 1 posts]

#998928

If I place the video outside the masthead then I can control width/height. Inside the masthead the default values are good enough for now.

Thanks

[Author]

Posts