Youtube video to responsive width

Youtube videos can be responsive. Wrap the iframe in a div with the class of "videowrapper" and apply the following styles:

.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
 
The .videowrapper div should be inside a responsive element. The padding on the .videowrapper is necessary to keep the video from collapsing. You may have to tweak the numbers depending upon your layout.

Comments

Post a Comment

Popular posts from this blog

Set limit wp_nav_menu

<?php $pages = wp_nav_menu( array( 'container_class' => 'menu1' ,'menu'=> 'Main Navigation','theme_location' => 'menu1', 'menu_class' => 'dropdown', 'echo' =>false,'container' => false ) );?> <ul class="dropdown"> <?php $limit = 5; $pages_list = preg_replace(array('#^ ]*>#','#$#'), '', $pages); $pages_arr = explode("\n", $pages_list); for($i=0;$i<$limit;$i++){     echo $pages_arr[$i]; } ?> </ul>
Read more

How to reset my Joomla administrator password?

**Follow procedure involve direct update to database. We highly suggest you backup the database before perform the steps. To reset the Joomla administrator password, you can do it with with a simple MySQL query. 1. Login our phpmyadmin, https://phpmyadmin.mysite4now.com/ 2. Select Joomla's database from the drop-down menu on the left 3. Open the SQL tab 4. In the text field write the following SQL query: UPDATE jos_users SET password = MD5( 'new_password' ) WHERE username = 'admin'; Note: "new_password" - replace this with the new password you wish to use. "admin" - replace this if your admin username is different. Once you are ready, click on the GO button to submit the query. If everything goes fine without errors, you should be able to login to Joomla with the new password.
Read more

Which clients support media queries on mobile version?

If you've built a responsive email design using media queries. The chart below outlines support for media queries across a range of mobile email clients and applications. When troubleshooting responsive designs and media queries, also keep in mind that the media query will be triggered by the viewport size of the device. Viewport sizes can vary drastically based on the physical screen size of the phone, the screen's resolution and the pixel density or device-pixel-ratio of the device. Media Query Support iOS (iPhone/iPad) Yes Android 4.x native client Yes Android Outlook Exchange via native client No Android Outlook.com app Yes Android Gmail app No Android Yahoo! Mail app No Gmail (Android Browser) No Outlook.com (Android Browser) No Yahoo! Mail (Android Browser) No Windows Phone 7 No Windows Phone 7.5 Yes Windows Phone 8 No BlackBerry OS 6 Yes BlackBerry OS 7 Yes BlackBerry Z10 Yes Kindle Fire native c...
Read more