Youtube not responsive ?
By lindyhopper on Wednesday, 11 December 2013
Posted in General Issues
Replies 10
Likes 0
Views 1.5K
Votes 0
Hi,

since update youtube is no longer responsive

when i add a video in kommento as a comment to a blog, the vidéo shows with the ratio set in back end but when i resize the window or look on my mobile phone, the width changes and addapts to the winndow size but the hight stays fixed and does not addapt

this is also the case in the easysocial streem that shows the comment

hope this can be fixed
Hello Peter,

Could you direct me to where the video comment section is located in your site and maybe a screenshot, please advice?

Thanks:)
Khairul
·
Thursday, 12 December 2013 10:57
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi

i added a test video

i just added the url to site info

lindyhopper
·
Thursday, 12 December 2013 11:31
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Peter,

I am unable to find your discussion page by using, please advice?
http://www.belkingreenroom.com.au/index.php?option=com_easydiscuss

Timeless theme is not meant for the use of the option in the search bar field. You might have to do a CSS hack for that as it is placed in the header.

div#discuss-wrapper .discuss-headers-wrapper .btn-ask {

-webkit-border-radius: 24px;

-moz-border-radius: 24px;

border-radius: 24px;

position: absolute;

bottom: 20px;

right: 20px;

font-size: 14px;

font-weight: bold;

color: #fff;

text-shadow: 0 1px 1px rgba(0,0,0,0.25);

background-color: #85c3cb;

background-image: -moz-linear-gradient(top,#93cfd7,#71b1ba);

background-image: -webkit-gradient(linear,0 0,0 100%,from(#93cfd7),to(#71b1ba));

background-image: -webkit-linear-gradient(top,#93cfd7,#71b1ba);

background-image: -o-linear-gradient(top,#93cfd7,#71b1ba);

background-image: linear-gradient(to bottom,#93cfd7,#71b1ba);

background-repeat: repeat-x;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff93cfd7', endColorstr='#ff71b1ba', GradientType=0);

border-color: #71b1ba #71b1ba #498c96;

border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);

filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);

border-color: #333 #333 #282828;

}


If your need further assistance please don't hesitate to ask,

Thanks:)
Khairul
·
Thursday, 12 December 2013 11:53
·
0 Likes
·
0 Votes
·
0 Comments
·
Did you answer in the wrong discussion ? I do not understand your answer :/ ??
lindyhopper
·
Thursday, 12 December 2013 18:42
·
0 Likes
·
0 Votes
·
0 Comments
·
photos in site details
lindyhopper
·
Friday, 13 December 2013 01:59
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Peter,

I'm sorry that i had post to the wrong discussion, I apologize for that.
I had added a css hack at the bottom of your custome css template to fix the youtube video in easysocial.
#es-wrap iframe, #section-kmt iframe, #es-wrap svg, #section-kmt svg {

	max-width: 100%;

	max-height: 100%;

}

We could control the fluidity of the youtube iframe but not the height.

Thanks:)
Khairul
·
Friday, 13 December 2013 11:18
·
0 Likes
·
0 Votes
·
0 Comments
·
no pb

will the height issue be solved in a futur release ? will i then have to remove the custom code ?

Thanks for the workarround !!
lindyhopper
·
Friday, 13 December 2013 12:00
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Peter,

Glad to know that your issue is solved, I will ask the team about this matter but I can't promise if it will be on the next release.

Thanks:)
Khairul
·
Friday, 13 December 2013 12:10
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi

just as a heads up, i have tested an other workarround, (not perfect either lol the video is big, but both height and width change)

i have moded the youtube.php file lines 53 to 59 : 

{

			return '<div class="video-wrappers"><div class="video-container"><iframe title="YouTube video player" width="' . $width . '" height="' . $height . '" src="http://www.youtube.com/embed/' . $code . '?wmode=transparent" frameborder="0" allowfullscreen></iframe></div></div>';

		}

		else

		{

		    // this video do not have a code. so include the url directly.

			return '<div class="video-wrappers"><div class="video-container"><iframe title="YouTube video player" width="' . $width . '" height="' . $height . '" src="' . $url . '&wmode=transparent" frameborder="0" allowfullscreen></iframe></div></div>';

		}



and added to css :

.video-container {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px; height: 0; overflow: hidden;

}

 

.video-container iframe,

.video-container object,

.video-container embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

- See more at: http://avexdesigns.com/responsive-youtube-embed/#sthash.TX4CwDYO.dpuf
lindyhopper
·
Friday, 13 December 2013 12:39
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Peter,

Thanks for sharing
Khairul
·
Friday, 13 December 2013 12:43
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post