Estoy tratando de agregar clase a elemento.
.html5-video-player { -webkit-transform: rotate(90deg) !important; -moz-transform: rotate(90deg) !important; -o-transform: rotate(90deg) !important; -ms-transform: rotate(90deg) !important; transform: rotate(90deg) !important; } <a href="https://www.youtube.com/watch_popup?v=p-_qed5LTTg">test</a> No puedo agregar CSS al elemento. Necesito rotar en dispositivos móviles. Entonces, luego agregaré la clase de arranque @media (max-width: 767.98px) { al elemento después de que funcione.
Aquí está el codepen.
No puedo incrustar videos directamente en mi sitio web porque no tengo espacio para eso. Lo necesito como enlace o botón de enlace. Si el método watch_popup no funciona, también puedo probar el modo de arranque que tiene un botón, al hacer clic en él aparecerá un video incrustado. Girar eso a 90 grados a pantalla completa también es aceptable. ¿O algún otro método de javascript/jQuery para que esto suceda? Necesito la rotación (pantalla completa) solo en dispositivos móviles.
Agregué el contenido del video en <iframe> . Al hacer clic en <button> , <iframe> gira 90 grados.
function rotate(){ document.getElementById("special-container").setAttribute("style", "display: inline !important"); document.getElementById("camera_view").setAttribute("style","transform: rotate(90deg)"); } a{ background-color: #4CAF50; border: none; color: white; padding: 5px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a onclick="rotate()">Rotate</a> <div id="special-container" class="embed-responsive embed-responsive-16by9" style="display: none;"> <iframe id="camera_view" class="embed-responsive-item container well well-small span6" style="height: 720px; width: 1280px; background-color: #2e2e2e;" src="https://www.youtube.com/watch_popup?v=p-_qed5LTTg"> </iframe> </div> </body> </html>Olvidaste class="html5-video-player" en el enlace 'a'