ต่อไป »

[jazzyrest]

สอบถามหน้อยครับ ผมอยากใส่วีดีโอยูทูปในหน้าเวป แต่วีดีโอไม่อยู่ตรงกลาง จะไปชิดขอบซ้ายตลอด ต้องทำอย่างไรให้วีดีโอยูทูปไปอยู่กี่งกลางได้ครับ ผมใช้ Wordpress นะครับ

ขอบคุณครับ

[lomkrodsp]

ของผมใช้วิธีลากเมส์คลุม แล้วก็กดให้อยู่ center
หรือ แบบนี้ก็ได้
 

โค๊ด:

<p style="text-align: center;"><iframe src="https://www.youtube.com/embed/zzzzzzzzzz" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

บางทีก็ขึ้นอยู่กับธีม

[jakky]

ส่วนตัวจะใช้วิธีเขียน custom css เพื่อป้องกันไม่ให้ม้นล้นจอมือถือครับ

โค๊ด:

.youtube-container {
    margin: 0 auto;
    display:block;
    width:560px;
    height:315px;
}
@media only screen and (max-width:600px) {
.youtube-container {
    width:100%; 
    }
}

โพสจะเป็นลักษณะแบบนี้

โค๊ด:

<iframe class="youtube-container" src="https://www.youtube.com/embed/xxxxxxx" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

[Legolas]

ลองแบบนี้ยังครับ

<center>.....</center>

[BoltsNuts]

ขอตามด้วยคนนะคับ เคยสงสัยอยู่เหมือนกัน

[jazzyrest]

ขอบคุณครับ +1 ทุกท่านครับ

[Aunpao]

<center>.....</center>คะ

[MD.18]

แบบนี้กลางทั้งแนวตั้งและแนวนอนครับ เอาไปประยุกต์ใช้เอาครับ

HTML

โค๊ด:

<section class="yt-box">
<div class="cc"><iframe class="video-wh" src="https://www.youtube.com/embed/daqfr6DJsGc?rel=0&autoplay=0"
frameborder="0" allowfullscreen
></iframe>
</div>
</section>

Custom CSS

โค๊ด:

.yt-box{width:55%;height:100%;min-width:320px;padding:10px;overflow:hidden;background:#000;}	
.cc{width:100%;height:100%;overflow:hidden;text-align:center;margin:0 auto;
display:flex;display: -webkit-flex;
-webkit-align-items:center;align-items:center;
-webkit-justify-content:center;justify-content:center;}
.video-wh{width:100%;height:320px;max-height:100%;}