Khắc phục lỗi đăng video lên Blogspot bị tràn ra ngoài trên điện thoại

Chào bạn hôm nay Blog Hồng chia sẻ cho bạn cách khắc phục lỗi đăng video lên Blogspot bị tràn ra ngoài trên điện thoại, nhiều bạn sử dụng blogspot khi đăng video bị tràn ra ngoài không responsive trên điện thoại làm không thân thiện với Google thì đây là điều mà các bạn cần.

Khắc phục lỗi đăng video lên Blogspot bị tràn ra ngoài trên điện thoại

Có 2 cách để cho các bạn lựa chọn

Cách 1 : Sử dụng CSS thuần

<style type='text/css'>
/* CSS Only */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}
</style>

Lưu ý : Thẻ class .post-body sẽ hoạt động tùy thuộc vào blog của bạn đang sử dụng thẻ gì, nếu thêm code vào mà vẫn không hoạt động có thể sửa post-body thành post.

Cách 2 : Sử dụng CSS kèm Javascript

/* Youtube Responsive bloghong.com*/
@keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}} .loader{position:relative;width:100%;float:left;overflow:hidden;height:350px;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px} .videoyoutube{text-align:center;margin:auto;width:100%;} .video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;} .video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

Bước 2 : Thao tác với Javascript đoạn này có thẻ chèn bên trên thẻ </body> hoặc /body

<script type='text/javascript'> //<![CDATA[
// Youtube Responsive Bloghong.com
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3); //]]>
</script>

Bước 3 : Chỉnh sửa HTML khi chèn Video
Như vậy khi chèn video bạn chỉ cần chèn đoạn code như sau :

<div class="videoyoutube"> <div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/31k_DB8KVQM"> </div> </div>
</div></div>
</div>

Link video các bạn click nút chia sẻ và lấy link video như hình dưới

Như vậy các video các bạn đăng lên đã khắc phục lỗi đăng video lên Blogspot bị tràn ra ngoài trên điện thoại. Chúc các bạn thành công nhé.