How To Build YouTube IFRAME Videos flexive to view Mobile and Web Browser Friendly

Its achievable with the help of following custom css styles and please add the below pieces of code in your html page:

CSS STYLES:
<style>
* Youtube Flexive for Mobile and web browser */
.video-container {
position: relative;
padding-bottom: 50%;
padding-top: 35px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

HTML:
<div class=’video-container’>
<iframe width=”600″ height=”450″ src=”http://www.youtube.com/embed/(YOUTUBE_EMBED_CODE_HERE)” frameborder=”0″></iframe>
</div>

(708)

Written by 

I am Sakthivel Madesh, a certified Salesforce Developer & Administrator working on Salesforce Technology since 2011. I am currently working in Techforce Services as Sr. Salesforce Developer. I have worked on multiple technologies Like PHP, Java, Salesforce, I am very passionate about Salesforce and to earn 13x Salesforce Certification. I love Trailhead for learning Salesforce Skill and Become a Trailhead Ranger too. I Love to Learn & Share my Salesforce knowledge to Salesforce Learners/Beginner using My Blog and Salesforce Community.

Leave a Reply