How to make YouTube embedded videos responsive on Blogger blogs


This is how to make the YouTube embedded videos responsive to screen sizes on a Blogger blog.

Add the following CSS styles into the Blogger CSS styles section of the Blogger template:
.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%;
}
Then, add additional div class video-container code wrapping around the YouTube embed code:
<div class="video-container">
      <iframe src="http://www.youtube.com/embed/abcdefghi" frameborder="0" width="560" height="315"></iframe>
</div>

References, Sources and Credits:




Comments

Post a Comment

Popular posts from this blog

City Code Table for Casio SGW300HD-1AV Watch

Image
This city codes are provided in the watch user manual but for the ease of references in the web, I put this table in this blog in case i wanted to refer to it using my smartphone. Hope you find this useful. Code City UTC/GMT offset (hours) WLG Wellington 12 NOU Noumea 11 GUM Guam 10 SYD Sydney 10 ADL Adelaide 9.5 SEL Seoul 9 TYO Tokyo 9 KUL Kuala Lumpur 8 HKG Hong Kong 8 SIN Singapore 8 BJS Beijing 8 PER Perth 8 TPE Taipei 8 BKK Bangkok 7 RGN Yangon 6.5 DAC Dhaka 6 KTM Kathmandu 5.75 DEL Delhi 5.5 KHI Karachi 5 KBL Kabul 4.5 DXB Dubai 4 THR Tehran 3.5 JED Jeddah 3 DOH Doha, Qatar 3 MOW Moscow 3 BGW Baghdad 3 HEL Helsinki 2 ATH Athens 2 ANK Ankara 2 ...
Read more

How to force only 4G or LTE network connection for Samsung Galaxy Note 4

Image
This is how to enable Samsung Galaxy Note 4 to force use only 4G (LTE) network connection for high speed internet data. There is a built-in switch in the smartphone that will enable the smartphone to force use only either 3G (WCDMA) or 2G (GSM) network connection but, there is no switch at all to enable the smartphone to force use only 4G (LTE) network connection. Video Tutorial This is screen video record to show you how to do it. If you prefer screenshots, please skip this video and scroll after the video. Screenshots Tutorial If you are clueless about the existing settings that enable you to switch network mode, goto “Settings > More networks > Mobile networks > Network mode”. Steps: Step 1 : From the phone dialer, dial *#2263# and the smartphone will bring you into the “Service Mode” screen like below. Step 2 : Select “[4] LTE BAND PART1 []” and the smartphone will bring you into a screen to select the types of LTE mode. Step 3 : Select “[1] LTE ALL []” to force the smartp...
Read more

Mounting NFS share directory from D-link DNS 320L on Ubuntu 12.04 LTS

Image
Seems like the steps on how to get the NFS mount point from the D-Link DNS 320L NAS server were not properly documented in their user manual. After setting up and enabled the NFS service on the D-Link DNS 320L NAS server, I went ahead to setup and mount the share directory/folder in Ubuntu 12.04 LTS assuming the mount point in NAS was /Volume_1/... but that is not the correct mount point to start with! Found this answer from D-Link forum post from a member (ba43123) that helped me to correctly mount the NFS share directory/folder on Ubuntu 12.04 LTS: After spending most of the last hour on the phone with D-Link Technical Support, I came away with the recommendation to take my Mac (which has successfully connected to a number of NFS shares in the past) to Apple to determine if the network settings for NFS are correct.  This is mostly due to the fact that the people who are taking the calls have no information about NFS in their scripts and Knowledge Base so they are at a total loss...
Read more