How to put a video responsive from Youtube on the homepage

[PuigMemberTopics: 4Replies: 2Total: 6 Member since: December 24, 2015]

Hi,

I would like to embed a video from youtube, full size on thee laptob but responsive on other platforms like mobile and tablets.

I don’t know how I can do it.

Thanks a lot.

[Forum ModeratorParticipantTopics: 0Replies: 20575Total: 20575 Member since: August 16, 2013]

Hi,

Kindly show us your website link

Regards,
Shri

[PuigMemberTopics: 4Replies: 2Total: 6 Member since: December 24, 2015]

Hi,

Here’s the website: http://www.y2cgymbox.com/en

Thanks!

[Forum ModeratorParticipantTopics: 0Replies: 20575Total: 20575 Member since: August 16, 2013]

Hi,

Kindly go to Appearance>Theme Options>Basic Settings>Custom CSS box:
paste this css code in custom css box

.video-container iframe{width:100%; height:600px;}

Regards,
Shri

[PuigMemberTopics: 4Replies: 2Total: 6 Member since: December 24, 2015]

Perfect!

Thanks a lot for you quickly answer.

[Forum ModeratorParticipantTopics: 0Replies: 20575Total: 20575 Member since: August 16, 2013]

paste this css code in custom css box (for Responsive)

@media screen and (max-width:479px) {
	.video-container iframe{width:100%; height:auto;}
	}

@media screen and (max-width:719px) and (min-width:480px) {
	.video-container iframe{width:100%; height:300px;}
	}
	
@media screen and (max-width:979px) and (min-width:720px) {
	.video-container iframe{width:100%; height:500px;}
	}

Regards,
Shri

[Emma BABIN-PIGOTMemberTopics: 9Replies: 9Total: 18 Member since: January 21, 2016]

Hello, I have followed your advice writing : video-container iframe{width:100%; height:600px;} in the css box (stetting basics)
but my video is still no responsive : http://ervent.aragon-team.fr/a-propos-d-ervent/

the embed from youtube is : <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/LKhldlWe2xI” frameborder=”0″ allowfullscreen></iframe>

Thanks for your help.

[Forum ModeratorParticipantTopics: 0Replies: 20575Total: 20575 Member since: August 16, 2013]

Hi Emma,

The website link you provided above is invalid. Please provide the valid link.

Regards,
Shri

[Author]

Posts