Alzad
Entschuldigung für die sehr einfache Frage! Ich bette ein YouTube-Video in meine WordPress-Site ein und möchte es reaktionsfähig machen. Gibt es eine einfache Möglichkeit, dem HTML etwas Code hinzuzufügen – das ist, was ich im Moment habe:
<center><iframe width="560" height="315" src="https://www.youtube.com/embed/zmRoFi5HCAc?rel=0" frameborder="0" allowfullscreen></iframe></center>
Ich denke, WordPress hat dafür neue Designunterstützung hinzugefügt (wp 5.x):
// Add support for responsive embeds.
add_theme_support( 'responsive-embeds' );
Bezug: Handbuch für Entwickler
Fügen Sie im CSS- oder benutzerdefinierten CSS-Abschnitt Ihres Designs diesen Stil hinzu:
iframe{
max-width: 100%;
}
Dadurch sollten Ihre iFrame-basierten Videoeinbettungen mobil reagieren. Sag Bescheid ob es geklappt hat oder nicht? Sie können Ihren Link auch teilen, wenn er nicht funktioniert.
Vielen Dank
Vielen Dank für Ihre Hilfe – ich habe gerade das benutzerdefinierte CSS hinzugefügt und es hat funktioniert 🙂
– Alzad
23. September 2015 um 8:46 Uhr
@Alzad froh, dass es funktioniert hat! Sie können diese meine Antwort als ausgewählte Antwort markieren 🙂
– Mohsin
23. September 2015 um 13:05 Uhr
Das habe ich getan, aber anscheinend erscheinen meine Markierungen erst nach einer gewissen Zeit, da ich neu bei Stack Overflow bin.
– Alzad
24. September 2015 um 14:47 Uhr
@Alzad kein Problem! Willkommen bei Stack Overflow Alzad!
– Mohsin
24. September 2015 um 15:06 Uhr
Dies Artikel zu CSS-Tricks erklärt, wie man das gut macht.
Ich habe einige erläuternde Kommentare in den folgenden Ausschnitt für Sie eingefügt.
.responsive-container {
position: relative;
padding-bottom: 56.25%; /* fallback if calc() not supported */
padding-bottom: calc(315 / 560 * 100%); /* aspect ratio of iframe */
height: 0; /* let padding set the height */
}
.responsive-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%; /* fill container */
height: 100%; /* fill container */
}
center {
width: 300px;
margin: 0 auto;
padding: 0 5px 5px 0;
overflow: hidden;
resize: both;
}<center><div class="responsive-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/zmRoFi5HCAc?rel=0" frameborder="0" allowfullscreen></iframe></div></center>Ich habe ein Plugin namens “Responsive Media” geschrieben. Es macht eingebettete Medien (von oEmbed) wie ein Youtube-Video responsive. Alles, was Sie tun müssen (nach der Installation dieses Plugins), ist einfach die Youtube-Video-URL in Ihren Artikel einzufügen.
Wo ist dein Code? Verwenden Sie ein CSS-Framework? Bitte fügen Sie Ihrer Frage weitere Details hinzu.
– Wes Foster
22. September 2015 um 16:35 Uhr
<center>Tags sind veraltet: developer.mozilla.org/en-US/docs/Web/HTML/Element/center– Wes Foster
22. September 2015 um 17:21 Uhr