Blogger Video Frame 100% shown on mobile | Html Code

Blogger Video Frame

Blogger Video Frame 100% shown on mobile, and not cut off:

Many themes have problem that when you open blog in mobile view style then video in the post is cut off due to sidebar, but following simple steps your blogger video frame 100% shown on mobile and never cut its sides.

• First of all go to your blogger dash board.
• Then click on Appearance from left side bar.
• Click on Editor Option and go to Css.
• Copy the Code given Below and Paste it below on style sheet.

Blogger Video Frame 100% shown on mobile Code is Given Below:

.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%;
}
.entry-content img, 
.entry-content iframe, 
.entry-content object, 
.entry-content embed {
 max-width: 100%;
}

——————————————————————————

After Pasting this code you will have another step to follow, when you will paste any video embed code on your blog use this code as well and then it will shows 100% on mobile view. Replace the red Text with your embed code.

<div class="video-container"> Video Embed code </div>

——————————————————————————

Trail Codes for Facebook and Daily-motion is given below:

For Daily Motion Videos use this:

<div class="video-container"><iframe frameborder="0" width="620" height="470" src="//www.dailymotion.com/embed/video/xxxxx" allowfullscreen></iframe></div>

For Facebook Videos use this:

<div class="video-container"><iframe src="https://www.facebook.com/video/embed?video_id= 0000000000" width="620" height="400" frameborder="5"></iframe></iframe></div>

————————————————————————–

Change only green color text for both Facebook or Daily Motion Videos.

Advertisement