The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
#5
|
||||
|
||||
![]()
I have put together a custom BBCode on my site for embedding youtube videos. What's different about this one is that if the user resizes their browser window, the video dynamically resizes, always maintaining a 10% border to the left and right and always maintaining an aspect ratio of 16:9. I have also wrapped the video player in a container.
Title: YouTube BB Code Tag Name: youtube Replacement: HTML Code:
<br> <div class="video_wrapper MHB_wrappers"> <div class="MHB_wrapper_header mhb_gradient"></div> <div style="background-color:transparent"> <div class="video-container"> <iframe src="http://www.youtube.com/embed/{param}?hd=1&vq=hd1080"> </iframe> </div> </div> <div class="MHB_wrapper_footer mhb_gradient"></div> </div> <br> Code:
.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%; } .video_wrapper { border: 1px solid #BBBBBB; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin-left: 10%; margin-right: 10%; } .MHB_wrappers { box-shadow: 2px 2px 3px rgba(20,74,98,0.5); } .MHB_wrapper_header { -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; padding-top: 15px; } .MHB_wrapper_footer { -moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius: 0px 0px 10px 10px; border-radius: 0px 0px 10px 10px; padding-bottom: 15px; } .mhb_gradient { background: #207498; /* Old browsers */ background: -moz-linear-gradient(top, #2891be 0%, #103a4c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2891be), color-stop(100%,#103a4c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #2891be 0%,#103a4c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #2891be 0%,#103a4c 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #2891be 0%,#103a4c 100%); /* IE10+ */ background: linear-gradient(to bottom, #2891be 0%,#103a4c 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2891be', endColorstr='#103a4c',GradientType=0 ); /* IE6-9 */ } |
Благодарность от: | ||
Bulent Tekcan |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
![]() |
|
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|