Paano gawing responsive ang youtube video sa website
8:02 PMPaano gawing responsive ang youtube video sa website o blog.
Mas maganda kung ang video mo sa website ay mas malaki ang screen kapag e open mo sa computer ang website o blog mo at kusa itong mag a-adjust depende sa laki ng screen mo. Kapag e open mo naman ito sa mga tablet o smart cellphone ay mag a-adjust din ang screen para kumasya at maging sakto din sa screen nito.
Copy mo lang ang code na ito at e paste sa html mode sa pina kataas o ibaba ng post mo.
<style>
.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%;
}
</style>
<div class="video-container">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/3yJl10J8HLA/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/3yJl10J8HLA?feature=player_embedded" width="320"></iframe>
</div>
Note palitan mo ang code naka bold na kulay blue ng youtube embedded video mo.
Kung responsive ang template ng blog mo try mong paliitin ang screen ng website mo at makikita mo kusang mag a-adjust yan.
Kahit e try mo paliitin ang screen ng binabasa mong ito na may sample video at ganun nga ang mangyayari, kusang mag re resize ang vedio size para kumasya lang sa blog screen mo.
Kung may tatlo kang video halimbawa ulitin mo lang e copy at paste ang sa
"<div class="video-container">
.......................</div>"
at palitan mo lang ang laman ng embedded youtube vedio code mo. Di mo na kailangan e copy ulit ang in line CSS na may code na "<style>.........</style>"
Sana makatulong ulit sa pag ayos ng blog ninyo.
Share the love.
0 comments