Khắc phục lỗi đăng video lên Blogspot bị tràn ra ngoài trên điện thoại - Blog Hồng - Thủ Thuật Blogspot- Facebook - Marketing

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
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

Với hướng dẫn này các bạn sử dụng hoàn toàn là CSS và đơn giản nhất là bạn sử dụng đoạn code sau chèn trên thẻ </head> hoặc /head
<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

Các theo tác dưới đây các bạn truy cập vào Chủ đề > Chỉnh sửa HTML và chèn code trên thẻ </head> hoặc /head
Bước 1 : Thao tác với CSS
/* 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
Khắc phục lỗi đăng video lên Blogspot bị tràn ra ngoài trên điện thoạ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é.

Đỗ Mạnh Hồng Designer, Developer

Tôi là Đỗ Mạnh Hồng chắc các bạn làm Blogger biết đến tôi cách đây vài năm trước rồi nhỉ, tôi xây dựng lên Blog Hồng với mong muốn lưu trữ những gì tôi trải nghiệm được mà không nhớ nổi để sau này tìm lại dễ dàng hơn và chia sẽ lại cho ai đó cần đến, những bài viết ở đây có một số tôi Coppy và tự viết.
Tôi mong rằng những bạn đến với Blog Hồng hãy văn minh lịch sự
URL : Copy
| https://www.bloghong.com/2019/09/khac-phuc-loi-ang-video-len-blogspot-bi.html

Không có nhận xét nào:

Đăng nhận xét