Go Back   vb.org Archive > vBulletin 4 Discussion > vB4 General Discussions
FAQ Community Calendar Today's Posts Search

 
 
Thread Tools Display Modes
Prev Previous Post   Next Post Next
  #5  
Old 01-08-2015, 01:42 AM
MarkFL's Avatar
MarkFL MarkFL is offline
 
Join Date: Feb 2014
Location: St. Augustine, FL
Posts: 3,853
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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>
In your additional.css template, include the following:

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 */
}
Reply With Quote
Благодарность от:
Bulent Tekcan
 


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:42 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04876 seconds
  • Memory Usage 2,621KB
  • Queries Executed 12 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (4)bbcode_code
  • (1)bbcode_html
  • (5)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (13)post_thanks_box
  • (4)post_thanks_box_bit
  • (13)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (4)post_thanks_postbit
  • (13)post_thanks_postbit_info
  • (13)postbit
  • (13)postbit_onlinestatus
  • (13)postbit_wrapper
  • (1)showthread_list
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_threadedmode.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids_threaded
  • showthread_threaded_construct_link
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete