是否可以在Wordpress中使*肖像* <video>標籤響應？

[重要提示：這隻會影響自託管<video>標籤，而不是YouTube或VIMEO I幀]是否可以在Wordpress中使*肖像* <video>標籤響應？

所以我嵌入網頁的手機視頻與垂直比（縱向）（通常爲720像素寬，1280px高度）。

一切正常，除了視頻不適應頁面。寬度將適合，但用戶需要在視頻播放時上下滾動以欣賞正在顯示的內容。

我試過所有的CSS技巧，使視頻分區響應，但它不會工作。

的視頻被包裝成一個div其內容如此：（！只有寬度似乎適應的頁面尺寸改變）

.wp-video-shortcode, video, .mejs-mediaelement { 
    max-width: 100% !important; 
    max-height:100% !important; 
}

但沒有效果。

如果我手動改變短碼的寬和高，像這樣：

[video width="720" height="1280" mp4="http://url.mp4" autoplay="true" poster="http://url.jpg"][/video]

成爲

[video width="340" height="680" mp4="http://url.mp4" autoplay="true" poster="http://url.jpg"][/video]

視頻變小，但仍然無法適應頁面。

我想我已經明白了爲什麼......？告訴我，如果我偏離了軌道：

的<video>嵌入在WordPress的是如何大小的整體前提，似乎是基於width：甚至還有叫$content_width用於此目的的全局變量，雖然沒有$content_height。

具體來說，這是在wp_video_shortcode功能會發生什麼：

global $content_width; 

// if the video is bigger than the theme 
     if (! empty($content_width) && $atts['width'] > $content_width) { 
      $atts['height'] = round(($atts['height'] * $content_width)/$atts['width']); 
      $atts['width'] = $content_width; 
     }

，你可以在上面看到，WP似乎只被檢查視頻僅針對頁面的寬度。

這怎麼解決？

來源

2016-01-23 nico

簡短的回答我認爲，WordPress不能做響應式肖像（視頻）嵌入'開箱'。

但是，您可以通過一些自定義編碼實現WordPress所需的功能。以下是從Twitter Bootstrap Framework改編而來，特別是如以下文檔所述：http://getbootstrap.com/components/#responsive-embed

我所做的更改是爲了適用於縱向比例爲9:16的縱向（視頻）嵌入式（假設您的視頻顯然是720px x 1280px（= 9:16寬高比））。

HTML：

<div class="container"> 
    <div class="embed-responsive embed-responsive-9by16"> 
    <iframe class="embed-responsive-item" src="[URL to your video]"></iframe> 
    </div> 
</div>

CSS：

.embed-responsive { 
    position: relative; 
    display: block; 
    height: 0; 
    padding: 0; 
    overflow: hidden; 
} 

.embed-responsive-9by16 { 
    padding-bottom: 177.78%; 
} 

.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    border: 0; 
}

的jsfiddle例如：https://jsfiddle.net/c4akmfxd/（網址在這個例子中的iframe是我能想到的是，第一個URL既是響應和可用通過HTTPS（必須具有JSFiddle的HTTPS）（這是我建立的一個名爲'Ten Moons'的網站））。

的<div與container類只是一個例子 - 它可以是任何你想要有一個適當的寬度，以把你的肖像內嵌入 - 並且可能是您的<body>標籤，或您的網頁的任何部分。

如果您需要不同的長寬比，只需更改（或創建一個新的CSS類）填充底部的.embed-responsive-9by16 CSS類。你可以計算出所需的百分比： height/width * 100（在你的情況下：1280/720 * 100 = 177.78%）。

如何在WordPress中獲得這一點是另一回事 - 主要取決於您的設置。你可以編輯CSS文件來添加這些CSS類;在你的頁面中獲取HTML可能是另一回事，因爲WordPress有時會「重寫」你粘貼在HTML視圖中的HTML，並去除你想要的東西。但JSFiddle證明你可以實現一個響應式肖像嵌入。

但是，我認爲你不需要對PHP變量$content_width做任何事情。

來源

2016-05-16 01:27:02

爲什麼不使用iframe？下面的代碼不需要任何CSS文件編輯。

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"> 
<iframe type="video/mp4" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/BXFLBj5y2A0" frameborder="5px" allowfullscreen="allowfullscreen"> 
</div>

根據您的用戶角色，WordPress在保存時可能會刪除iframe代碼。如果你是一個作者，這會發生。查看是否可以更改爲編輯角色

來源

2016-09-12 15:54:21

是否可以在Wordpress中使*肖像* <video>標籤響應？

回答

相關問題

是否可以在Wordpress中使肖像 <video>標籤響應？